@deriv-com/quill-icons-web

React icon components for Deriv's Quill design system. Every icon is generated straight from the Quill Figma library — the single source of truth — so what you import always matches design.

Install

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

react >= 17 is required as a peer dependency.

Usage

import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web'

export function Example() {
  return <Num0FlagPlaceholderIcon size={32} />
}

Icons in the system group are single-color and inherit the surrounding text color via currentColor:

<span style={{ color: 'rebeccapurple' }}>
  <ArrowLeftRegularIcon size={24} />
</span>

Other groups (flags, markets, currency, accounts, …) keep their fixed brand colors from Figma — do not wrap them in a color style expecting them to tint.

Props

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

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

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

Per-group imports

Import a single group to keep things tidy (the package is fully tree-shakeable either way):

import { Num0FlagPlaceholderIcon } from '@deriv-com/quill-icons-web/flag'

Available groups: accounts, app-stores, currency, flag, markets, social, system, trade.

Raw SVGs

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

import iconUrl from '@deriv-com/quill-icons-web/svg/flag/0-flag-placeholder.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