@deriv-com/quill-illustrations-web

React illustration components for Deriv's Quill design system. Every illustration is generated from the Quill Figma library — the single source of truth — and shipped as optimized WebP at 1×/2×/3× for crisp rendering on any display.

Install

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

react >= 17 is required as a peer dependency.

Usage

import { AccountCryptoLeftIllustration } from '@deriv-com/quill-illustrations-web'

export function Example() {
  return <AccountCryptoLeftIllustration alt="Crypto account" width={240} />
}

Each illustration renders an <img> with a responsive srcSet (1x, 2x, 3x), so the browser picks the right resolution automatically.

Props

Each illustration extends React.ImgHTMLAttributes<HTMLImageElement> — set width/height, className, loading="lazy", alt, etc. as you would on any <img>. alt defaults to "" (decorative); pass a meaningful value when the illustration carries meaning.

Per-group imports

import { AccountCryptoLeftIllustration } from '@deriv-com/quill-illustrations-web/account'

Available groups: account, illustration, logos, markets, platforms, status.

Raw WebP assets

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

import src2x from '@deriv-com/quill-illustrations-web/webp/account/[email protected]'

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