Icons

We use Lucide icons for consistent, lightweight SVG icons throughout the platform.

Icon Sizes

Proportional to font size for scale-aware components.

--g-icon-size-xs 12px (0.75em)
--g-icon-size-sm 14px (1em)
--g-icon-size-md 18px (1.25em)
--g-icon-size-lg 21px (1.5em)
--g-icon-size-xl 28px (2em)

Navigation

Actions

Status

Interface

Content

Usage

<script>
  import { Home, Settings, User } from 'lucide-svelte';
</script>

<Home size={16} />
<Settings size={20} strokeWidth={1.5} />
<User size={24} color="var(--g-color-fg-muted)" />

Guidelines

  • Use size prop for consistent sizing (matches icon-size tokens)
  • Use color prop with CSS variables for theme-aware colors
  • Default stroke width is 2; use 1.5 for lighter appearance
  • Icons should be decorative or paired with text labels for accessibility