Design System
GenAI Platform
← Design System
Foundations · Iconography

Icons.

The system uses Lucide — an open-source outline family drawn on a 24×24 grid with a 2px default stroke. Over 1,400 glyphs, one visual voice, zero custom SVGs. Icons are quiet — they support copy, they don't replace it.

Family

Outline, geometric, 24×24 grid. Stroke 2px at default size. Every glyph shares consistent line endings (round caps, round joins) so any combination reads as one system.

lucide · 1,400+ glyphs

System specs

LibraryLucide (fork of Feather). ISC license, free commercial use. Grid24 × 24 Stroke2px default · 1.5px on ≥32px · 2.25px on ≤16px Caps & joinsRound · round FillNone — outline only ColorcurrentColor — inherits from text

Sizes

Five canonical sizes. Pair icon size to line-height of adjacent text. Never scale an icon below 14px or above 56px — pick the next step instead.

14 · inlinein-copy marks
16 · UIbuttons, menus
20 · defaultnav, lists
32 · featurecard heads, stats
56 · heroempty states

Treatments

Four ways icons show up in the UI. Inline (currentColor) is the default. Tinted tile for feature rows and alerts; solid fill (coloring the stroke, not adding fills) for emphasis; circle halo for avatar-adjacent meta.

InlinecurrentColor
Tinted tileiris-100 / iris-700
Accentrole color
Solid haloiris-500 / white

Starter set

The 40 icons that cover ~80% of product UI. Everything else ships from lucide-react on demand — no need to curate.

home
search
inbox
bell
settings
user
users
folder
file
file-text
image
link
paperclip
download
upload
share-2
plus
minus
x
check
chevron-down
chevron-right
arrow-right
arrow-up-right
edit-3
trash-2
copy
filter
more-h
calendar
clock
star
info
alert-triangle
alert-circle
help-circle
lock
shield
key
log-out

In use

How icons show up inside real components.

In buttons · 14px · stroke 2.25

Icons in buttons use 2.25 stroke to hold weight against button text.

In feature rows · 16px · tinted tile

Two-factor authRequired for all admin accounts.
NotificationsEmail, Slack, and in-app.
API keysManage your team's tokens.

Do & don't

A few rules that keep the system cohesive over time.

Use one icon familyEvery icon in a surface should come from Lucide. Don't mix in Heroicons, Phosphor, or custom SVGs mid-flight.
Colour via currentColorIcons inherit from parent text. Set color on the wrapper; don't hard-code stroke on the SVG.
Keep the default strokeUse 2px at 20–24px. Tighten to 2.25 at small sizes; loosen to 1.5 at 40+. Don't eyeball strokes between those.
Don't mix outline and solid icons in one surfaceIf you need a solid glyph, wrap the outline in a tinted tile — don't reach for a different family.
Don't bump stroke to add weightIf an icon feels too light, increase its size or add a tinted background. Thick strokes look like a different family.
Don't color icons for decorationColour communicates meaning (success/warning/role). Neutral ink is the right default 90% of the time.

Usage

Two ways to consume — the CDN script on static pages, or the lucide-react package in apps.

/* 1. Static — drop into any HTML */
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<i data-lucide="arrow-right"></i>
<script>lucide.createIcons()</script>

/* 2. React — preferred in product */
import { ArrowRight, Bell } from 'lucide-react';

<ArrowRight size={16} strokeWidth={2.25} />
<Bell   className="text-iris-700" />

/* Sizing — match the line-height of adjacent text */
.akku-btn svg   { width: 14px; height: 14px; stroke-width: 2.25; }
.akku-nav  svg  { width: 16px; height: 16px; stroke-width: 2;   }
.akku-hero svg  { width: 56px; height: 56px; stroke-width: 1.5; }