Icons

helixui ships an integrated icon set as a separate workspace package, @helixui/icons. Every glyph is hand-authored on a 24×24 grid with a 1.6 stroke and round caps; colors come from the surrounding currentColor, so a <Heart /> inside a danger Button automatically picks up the danger foreground.

Searchable gallery: helixui.ai/icons

Counts

Style	Count
Outline	238
Filled	28
Total	266

Usage

import { ChevronDown, Search, Star, StarFilled } from '@helixui/icons';

<ChevronDown />                              // 20×20, currentColor, hidden from AT
<Search size={24} />                         // any size
<Star label="Bookmark this article" />       // becomes role="img" + aria-label
<StarFilled style={{ color: '#f59e0b' }} />  // filled variant inherits color

Inside helixui components

The chat composer’s send button, the AI Chat’s Sparkle, the BottomNav items, the Settings sidebar — all use @helixui/icons. So when you import a helixui component, your bundle only inherits the icons that component uses.

Tree-shaking

Each icon is a top-level named export from outline.tsx / filled.tsx. Importing Search only emits the Search SVG into your bundle (~200 bytes). The full set is only ever loaded if you literally walk the ICONS registry.

ICONS registry

import { ICONS, iconsByCategory } from '@helixui/icons';

// Flat map
for (const entry of Object.values(ICONS)) {
  console.log(entry.name, entry.category, entry.keywords);
}

// Grouped
const groups = iconsByCategory();
groups.action.length;   // → 35-ish
groups.symbol.length;   // → ~25

The gallery at /icons is built directly on top of this registry.

By default an icon is aria-hidden="true" and focusable="false" — decorative.
Pass label="…" to make it meaningful: the icon becomes role="img" with the given aria-label. Use this for icon-only buttons (combined with the parent’s accessible name).
Always pair a meaningful icon with text or a label — color and shape alone are not enough.

Filled vs outline

The filled set is intentionally small (~28). Use it for state changes: a bookmark that has been bookmarked (BookmarkFilled), a starred item (StarFilled), an active notification bell (BellFilled). Don’t pair filled icons with text labels by default — outline reads better at small sizes.