Iconography

Overview

Icons are provided by the @fsai/icons package, which supports both React and React Native. Icons are imported by name as React components.

import { Icon } from "@fsai/icons";

<Icon name="PencilEdit" className="h-4 w-4 text-icon-default" />;

Or import specific icons directly:

import { Globe, PencilEdit, ChevronDown } from "@fsai/icons";

<Globe className="h-4 w-4 text-icon-default" />;

Icons should follow consistent sizing relative to their context:

Size	Class	Usage
12px	`h-3 w-3`	Inline indicators, badges
16px	`h-4 w-4`	Standard UI icons (buttons, inputs, table cells)
20px	`h-5 w-5`	Emphasized icons, section headers
24px	`h-6 w-6`	Large standalone icons, empty states

Icons use the semantic icon color tokens from the design system:

Class	Purpose
`text-icon-strong`	Primary/emphasized icons
`text-icon-default`	Standard icons (most common)
`text-icon-subtle`	De-emphasized icons
`text-icon-muted`	Least prominent, decorative icons
`text-icon-disabled`	Disabled state
`text-icon-contrast`	Icons on dark backgrounds

For colored icons, use the per-color semantic tokens:

Do use h-4 w-4 as the default icon size
Do use text-icon-default as the default icon color
Do pair icons with text labels for accessibility (or use aria-label for icon-only buttons)
Don't apply custom colors to icons — use the semantic color tokens
Don't use icons as the only means of conveying meaning without an accessible label