Icons

The @unflow-ui/icons package provides over 2,000 icons as individual React components. Each icon is generated from an optimised SVG using SVGR + SVGO, so the resulting components are clean, accessible, and minimal.

Installation

npm install @unflow-ui/icons

Importing icons

Icons are organised into category subdirectories. Import each icon by its category path:

import { CloudFog } from '@unflow-ui/icons/weather-nature/cloud-fog';
import { Google } from '@unflow-ui/icons/social/google';
import { ChevronDown } from '@unflow-ui/icons/arrows/chevron-down';

Because each icon is a separate module, only the icons you import end up in your bundle.

Usage

Icons are standard SVG React components. They accept all SVG props:

<CloudFog className="text-grey-500" width={20} height={20} />

Inside UnflowUI components, just pass them as ReactNode:

<Button
  label="Upload file"
  startIcon={<CloudFog />}
  variant="secondary"
  size="md"
/>

Sizing

Icons default to 1em width and height (inheriting from font-size). You can override with Tailwind or inline styles:

<ChevronDown className="w-4 h-4" />
<ChevronDown style={{ width: 16, height: 16 }} />

Categories

Color

Icons inherit their color from CSS currentColor. Set the color via the color CSS property or a Tailwind text utility:

<CloudFog className="text-brand-500" />   /* inherits brand green */
<Google className="text-grey-600" />       /* inherits grey */