@deriv-com/quill-logos-web

React logo components for Deriv's Quill design system. Every logo is generated from the Quill Figma library — the single source of truth — so what you import always matches brand. Unlike icons, logos keep their own colors.

Install

npm install @deriv-com/quill-logos-web
# pnpm add @deriv-com/quill-logos-web
# yarn add @deriv-com/quill-logos-web

react >= 17 is required as a peer dependency.

Usage

import { Num10CoinsBrand } from '@deriv-com/quill-logos-web'

export function Example() {
  return <Num10CoinsBrand size={48} />
}

Logos render at their designed colors. Many come in Brand / Black / White variants — pick the export that suits your background.

Props

Each logo extends React.SVGProps<SVGSVGElement> and adds:

| Prop | Type | Default | Description | | ------ | ------------------ | ------- | --------------------------------- | | size | number \| string | 24 | Sets both width & height. |

Every other SVG prop (className, onClick, ref, aria-*, …) passes straight through to the underlying <svg>.

Per-group imports

import { Num10CoinsBrand } from '@deriv-com/quill-logos-web/payment-methods'

Available groups: brand, deriv-products, others, partner-s-products, payment-methods, sub-brands.

Raw SVGs

The source SVG files ship in the package if you need them directly:

import logoUrl from '@deriv-com/quill-logos-web/svg/payment-methods/10-coins-brand.svg'

Formats

Ships ESM + CommonJS with TypeScript types. sideEffects: false for tree-shaking.

Source & versioning

Generated from Figma by the pipeline in deriv-com/product-design-quill-icons. Generated files are not edited by hand — changes flow from the Figma library.

License

MIT © Deriv