ICONS

Line icons

The outline set used across Avava — search, preview and copy.
THEME
01

Browser

Search, filter, preview and copy
/
1539 icons
Preview
SIZE
STROKE
COLOUR
Click any icon to see it large and copy SVG or JSX.
Lucide v0.460.0 · ISC licence · lucide.dev
02

In context

Buttons, inputs, navigation, badges, empty states
Buttonsicon + label · icon-only
20 px icon · 8 px gap · icon-only buttons are 40 px with aria-label
Inputsleading · trailing
Search clients…
38,600.00
lena@nordic
Navigation20 px · active tint
DashboardProjects12Invoices3CalendarSettings
Status badgesicon + word, never icon alone
PaidPendingOverdueSent
AV-2026-042 · NordicPaid
AV-2026-043 · LumenPending
AV-2026-040 · KayaOverdue
Empty state48 px · 1.5 stroke
No photos yetDrop selects here or upload from your computer.
03

Sizes & grid

Grid, size × stroke, alignment, filled pairs
24 px grid2 px padding · keylines
Coral square = 20 px live area · cyan circle = optical keyline
Size & strokepair them, don’t mix
16 pxDense · 2tables · badges
20 pxDefault · 2buttons · nav · inputs
24 pxLarge · 2cards · headers
48 pxHero · 1.5empty states
Alignment with textcentre, not baseline
DO · CENTREDUpload selects
DON’T · BASELINEUpload selects
OUTLINE ↔ FILLED
→→→→
Filled = active / selected state. Full set on the Filled icons page.
04

Rules & a11y

Checklist and Do / Don’t
Checklist
✓Decorative icons are hiddenaria-hidden="true" when a label is next to it
✓Icon-only buttons have a namearia-label="Delete" + a tooltip
✓44 px hit areaeven when the glyph is 16–20 px
✓One stroke per size2 px for 16–24, 1.5 px for 32+
✓currentColoricons inherit text colour — no hard-coded fills
✓Status = icon + wordnever colour or shape alone
DO✓Use the same set everywhere✓Centre icons with text, 8 px gap✓Pick the plain metaphor (trash, not bin-with-lid)✓Swap to filled only for active states
DON’T✕Mix outline and filled in one row✕Scale icons with font-size hacks✕Use icons without labels in navigation✕Recolour parts of a single icon