Icons

guide

Farn does not ship an icon set. Icons are a large, opinionated surface — hundreds of glyphs, multiple weights, a release cadence of their own — and bundling one would tie Farn to choices that belong to your project, not the token layer. Instead, Farn gives you the sizing and colour tokens to make any third-party set feel native.

Recommended sets

Any SVG or icon-font library works. These pair well with Farn's weight and warmth:

• Lucide — clean, consistent, MIT-licensed; great default.
• Heroicons — outline + solid pairs, made by the Tailwind team.
• Phosphor — six weights, flexible and characterful.

These docs themselves use Tabler Icons via the icon font — proof that the approach is library-agnostic.

Size with spacing tokens

Drive icon dimensions from the spacing scale so icons track the rest of the system. As a rule of thumb, an inline icon matches the cap height of its text; a standalone affordance sits a step up.

.icon {
  width: var(--space-md);   /* 24px — standalone / button icon */
  height: var(--space-md);
}

.icon-inline {
  width: 1em;               /* matches surrounding text size */
  height: 1em;
  vertical-align: -0.125em; /* optical baseline nudge */
}

Context	Token	Size
Inline with text	1em	tracks font-size
Button / input affordance	--space-md	24px
Standalone / feature	--space-lg	36px

Colour with semantic tokens

Use currentColor so icons inherit their parent's text colour, then let Farn's semantic tokens do the theming. SVG icons set to fill: currentColor (or stroke: currentColor) adapt to light, dark, and surface contexts for free.

.icon { fill: currentColor; }

/* Inherits --color-text by default; override per intent */
.icon-accent  { color: var(--color-accent); }
.icon-error   { color: var(--color-error); }
.icon-muted   { color: var(--color-text-tertiary); }

Because semantic tokens already resolve per theme, an icon coloured with var(--color-text) stays legible on every surface without a single dark-mode override.

Accessibility

• Decorative icons: add aria-hidden="true" so screen readers skip them.
• Meaningful icons (icon-only buttons): give the control an aria-label.
• Never signal state with colour alone — pair an icon or text with the semantic colour.