Explore and integrate the complete set of icons from Deriv with easy-to-use React components. These icons are exported from a Figma Icon project.

We developed the Deriv Quill Icons library to address several critical considerations across our projects:

1. Consistency across all of our projects: By creating Deriv Quill Icons we ensure a consistent design language across all of our applications. All icons will have a similar style, size, and color.
2. Easy Maintenance: Managing all of the icons in a centralised library makes it easier to update or modify them. If we decide to change the design or add new icons, we only need to make changes in one place, and the updates will be reflected throughout all of our applications.
3. Reuse and Efficiency: We can easily reuse the same set of icons across different components and pages in our applications. This promotes code reusability and reduces redundancy, as we don't have to duplicate icon assets or styles.
4. Customisation: It allows us to customise our icons globally. For example, we can change the color scheme, size, or other visual aspects of all icons in one place without modifying individual components. Also we can easily apply optimisations to all of our icons in one place.
5. Developer Productivity: It enhances our developer productivity. Developers can easily find and use the icons they need without having to search for or create new assets each time.

npm i @deriv/quill-icons

The published package is ESM-only (single dist/ build, no CommonJS require). Use import in apps or bundlers that resolve the exports field.

Illustration components render <img> tags backed by WebP assets (Figma PNG renders are converted to WebP; complex 3D artwork is not inlined as SVG). Icons, logos, and other categories remain optimized SVG React components.

Usage

import { CurrencyAlgoIcon } from '@deriv/quill-icons';

const TestComponent = () => (
  <h3>
    Lets go for a <CurrencyAlgoIcon />?
  </h3>
);

Category-scoped imports (recommended for tree-shaking):

import { LabelPairedUserMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
import { StandaloneArrowLeftRegularIcon } from '@deriv/quill-icons/Standalone';
import { TradeTypesVanillaCallIcon } from '@deriv/quill-icons/TradeTypes';
import { CurrencyUsdcEthereumIcon } from '@deriv/quill-icons/Currencies';
import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';

We use @figma-export to export Figma Components so Please read their docs and try to get comfortable with their concepts.

With @figma-export we export to handle SVG creation for each Figma Component and then with transform-svg-with-svgo we optimize the exported SVGs. this is a transformer and you can add/remove/update SVG attributes with it.

• @figma-export/output-components-as-svg: We use this to generate SVG files, you can check them in svg folder.
• @figma-export/output-components-as-svgr: We use this to generate React Components based on transformed (optimized) SVG files. you can check them in src/react folder.
• npm run export:icons and npm run export:logos use the SVG/SVGR outputters above — all icon and logo categories remain SVG React components.
• Illustrations only (custom WebP pipeline) — the Illustration category is excluded from export:icons and exported as WebP (Figma PNG → WebP via sharp), not SVG:
  • npm run export:illustrations — fetches PNG renders from Figma (scripts/export-illustrations-png.ts), converts to WebP, writes to webp/Illustration/ and src/react/Illustration/assets/, and writes <img> React wrappers in src/react/Illustration/.
  • npm run export:illustrations:3d — re-exports account/currency 3D coin icons only (same 1× Figma source size as other illustrations).
  • npm run migrate:illustrations:png — offline fallback: rasterize existing svg/Illustration/*.svg into WebP assets (requires SVG sources on disk).
  • npm run sync:illustration:components — regenerate React wrappers from existing src/react/Illustration/assets/*.webp without Figma.
  • npm run build copies WebP assets into dist/react/Illustration/assets/ for publish.

Import illustrations as WebP-backed components:

import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';

<DerivLightWalletIcon width={120} height={120} alt='Wallet' />;

• node >=18.0.0
• npm >=9.0.0
• git (for contribution)
• Figma Token (Check This to set it up for yourself)
• Figma File ID
• Figma icons page

1. Enter the project directory

   cd quill-icons

2. Create a .env file inside quill-icons folder with this content:

   FIGMA_TOKEN=your_figma_access_token
   

3. Install your dependencies:

   npm ci

4. Export (requires FIGMA_TOKEN in .env):

   npm run export

   Icons and logos export as optimized SVG React components; illustrations export as WebP assets via export:illustrations (included in export / rebuild).

5. Build (for local publish or linking):

   npm run build

In the Quill Design System, we utilise naming conventions to store and locate components in their respective groups easily. The naming conventions differ slightly between Quill Icons, Quill Logos and Quill Illustrations. This is to cater specifically to their specific needs.

• "Category name" refers to the broad number of categories the icons reside in—such as currency, flag, and market icons.
• (Only if applicable) The "Size" part of the naming convention is only added when the icons are provided in multiple different sizes.
• "Icon name" is the distinct name for each icon that differentiates one icon from another.
• (Only if applicable) Applied to icons that have variations—such as regular/bold and white/black.

Examples of icons using this naming convention:

1. illustrative / md / derived-md = [Category name] / [Size] / [Icon name]
2. flags / flag-malysia = [Category name] / [Icon name]
3. standalone / sm / grips-dots-vertical-sm / regular = [Category name] / [Size] / [Icon name] / [Style]

• "Category name" refers to the general category that encapsulates all logos, hence, the name "logo".
• "Subcategory name" refers to the specific categories that further divide logos into—such as brands, sub-brands, and payment methods.
• "Logo name" is the distinct name for each logo that differentiates one logo from another.
• "Styles" are variations of the logo, in terms of colour, alignment, etc.

Examples of logos using this naming convention:

1. logo / brand / deriv-wordmark / coral = [Category name] / [Subcategory name] / [Logo name] / [Style]
2. logo / payment method / visa / brand = [Category name] / [Subcategory name] / [Logo name] / [Style]

• "Category name" refers to the general category that encapsulates all illustrations, hence, the name "illustration".
• "Subcategory name" refers to the specific categories that further divide illustrations into.
• "Styles" are variations of the illustration, in terms of colour, theme, etc.
• "Illustration name" is the distinct name for each illustration that differentiates one illustration from another.

Examples of illustrations using this naming convention:

1. illustration / deriv / light / pairs = [Category name] / [Subcategory name] / [Style] / [Illustration name]
2. illustration / deriv / light / ic-cashier-locked = [Category name] / [Subcategory name] / [Style] / [Illustration name]
3. illustration / deriv / dark / positions-history = [Category name] / [Subcategory name] / [Style] / [Illustration name]

To export new icons, run npm run rebuild. It will automatically export, optimize, and convert SVGs to React components. Afterward, just commit the changes and create a new PR.

We use semantic-release for automating the release workflow. Commit messages determine the release type. Refer to the table below for guidelines.

Triggering a release

For each new commit added to one of the release branches (for example: master, next, beta), with git push or by merging a pull request or merging from another branch, a CI build is triggered and runs the semantic-release command to make a release if there are codebase changes since the last release that affect the package functionalities.

For further information please checkout the semantic-release documentation.