Icons

Lumen uses inline SVG — no icon font, no library dependency. All icons live at apps/web/components/icons/index.tsx.

Rules

• Stroke-based, strokeWidth={1.6} or 1.8 for default, 1.3 for tight contexts
• 16×16 default, 14×14 for sm buttons, 12×12 for inline labels
• stroke="currentColor" — color inherits from parent text
• fill="none" unless it's a filled icon (badges, solid nav indicators)

Available icons (not exhaustive)

| Name | Usage | |---|---| | IconHome | Home nav | | IconFolder | Projects, library, departments | | IconDocument | Files, docs | | IconChat | Chat / threads | | IconUsers | Members, users table | | IconShield | Admin, security | | IconShare | Share button | | IconPlus | Add, new | | IconSearch | Search input | | IconChevronRight / IconChevronDown | Disclosure | | IconClose | Modal close | | IconClipboard | Audit log | | IconSpark | AI config |

When you need a new icon, add it to the same file. Follow the existing pattern:

export function IconMyNewIcon({ width = 16, height = 16, className }: IconProps) {
  return (
    <svg width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="..." />
    </svg>
  );
}

Styling

// Inherited color
<IconFolder className="text-text-muted" />

// Sized
<IconShare width={14} height={14} />

// As button icon
<Button variant="icon-only" size="sm">
  <IconShare />
</Button>

Don't

• Don't import lucide-react or heroicons — adds a dep for content already inlined
• Don't use emoji as UI icons — renders differently per OS
• Don't scale icons via transform: scale() — use width/height props or wrapper sizing

Project color indicators

When indicating a project (folder icon, sidebar dot), use the project's color field as background tint:

<div
  className="w-12 h-12 rounded-[var(--radius)] flex items-center justify-center"
  style={{ backgroundColor: `${project.color}18`, color: project.color }}
>
  <IconFolder />
</div>

The 18 suffix is hex for ~10% opacity — the tint is subtle, the icon is the project color at full strength.