@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