The system uses Lucide as the primary icon library. Lucide is a fork of Feather Icons with additional icons and active maintenance.

Lucide icons

Load Lucide from the CDN or install via npm:

<!-- CDN -->
<script src="https://unpkg.com/lucide@latest"></script>

# npm
npm install lucide

Default style

Attribute	Value
Stroke weight	1.75
Default size	20px
Size variants	16px, 20px, 24px

Icon + button pairings

Common icons

Common set for product UI previews. Based on Lucide icons with 1.75 stroke and 20px default size.

Usage guidelines

Icon + text alignment. Icons sit inline with text at the same baseline. Use display: inline-flex and align-items: center for proper vertical alignment.

Color. Icons inherit the current text color. No special color classes needed.

Spacing. Use a 6-8px gap between icon and text in buttons and links.

Accessibility. Decorative icons should have aria-hidden="true". Interactive icons need aria-label or visible text.

<!-- Decorative icon -->
<button class="of-btn of-btn--primary">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  Save
</button>

<!-- Icon-only button (needs label) -->
<button class="of-btn of-btn--ghost" aria-label="Close">
  <svg width="20" height="20" aria-hidden="true">...</svg>
</button>

Icon library alternatives

While Lucide is the primary choice, you may use:

• Heroicons — Tailwind’s sibling project, similar stroke style
• Radix Icons — Smaller set, same aesthetic

Avoid mixing multiple icon libraries on the same page. Pick one and stay consistent.

Icon resources

• Lucide.dev — Full icon library and search
• Figma plugin — Direct insertion into Figma