Icons

Grundtone ships icons as a separate opt-in package @grundtone/icons. The icon components in each framework are generic — they accept any icon library that follows the IconDefinition contract, not just @grundtone/icons.

Install

npm

npm install @grundtone/icons

pnpm

pnpm add @grundtone/icons

Icon Gallery

Click an icon to copy its name.

action

calendar

check

close

cookie

eye-off

eye

file

search

upload

navigation

arrow-left

arrow-right

chevron-left

chevron-right

chevron-up

external-link

menu

status

alert-circle

alert-triangle

check-circle

info-circle

20 icons in 3 categories

IconDefinition Contract

Any icon library compatible with Grundtone must provide objects matching this interface:

interface IconDefinition {
  /** SVG inner content (paths, circles, etc.) */
  body: string;
  /** SVG viewBox attribute */
  viewBox: string;
  /** Optional category for grouping */
  category?: string;
}

The @grundtone/icons package exports a typed registry of these definitions. You can also build your own registry or pass icon definitions directly.

Size Presets

All icon components share these size presets:

Size	Dimension
xs	12px (0.75rem)
sm	16px (1rem)
md	20px (1.25rem)
lg	24px (1.5rem) — default
xl	32px (2rem)
2xl	40px (2.5rem)

Color Inheritance

Icons use currentColor, so they inherit the parent's text color. Each icon component also accepts a color prop for explicit overrides.

Next Steps

• Custom Icons — add your own SVGs
• Vue Component — <GTIcon> usage in Vue / Nuxt
• React Native Component — <GTIcon> usage in React Native
• CSS Utilities — plain HTML/CSS icon classes