Iconography
Icons are the fastest way to recognize an action — if they’re drawn from a consistent set and clearly labeled. This page covers the icon library we use for internal applications, sizing rules, and the principles that keep icons useful instead of decorative.
The library
Internal apps standardize on Lucide. It’s a free, open-source set with over 1,400 icons drawn on the same grid and stroke, and ships as tree-shakable React components — pages only download the icons they use.
Lucide
Outline style, 24×24 grid, 1.5–2px stroke. Every icon is a React component with built-in accessibility props.
Usage
import { Search } from 'lucide-react';
<Search size={20} aria-hidden="true" />
// Icon-only button — give it an accessible name
<button aria-label="Search">
<Search size={20} aria-hidden="true" />
</button>Principles
Icons earn their place by speeding recognition. These six principles keep them clear, consistent, and accessible.
Always pair an icon with a label
Icons are ambiguous on their own. A visible text label removes that ambiguity and makes the action clear on first encounter — even for standard icons.
Never rely on hover to reveal meaning
Hover-only tooltips fail on touch and cost time on desktop. The label belongs next to the icon, visible at all times.
Recognition over recall
Use the icons people already know — search, home, settings, trash. Inventing a new metaphor forces every user to learn it.
One style, everywhere
Stick to a single icon family with a consistent stroke weight, corner style, and grid. Mixing outline and filled icons makes a UI feel disjointed.
Size for the surface
Icons must read clearly and meet a 24×24 minimum hit target. They should never compete visually with the text or content they support.
Don’t use icons for everything
Not every action needs an icon. If a metaphor is forced or rarely used, plain text is clearer. Icons earn their place when they speed recognition.
Starter set
A small set of icons covers most product surfaces. Browse the full catalog at lucide.dev/icons and import what you need.
Sizes
Use one of four standard sizes. The tap target may be larger than the rendered icon — pad the surrounding button to reach 24×24 minimum, 44×44 preferred on touch.
Labeling
A user’s understanding of an icon is based on past experience. Even “standard” icons benefit from a visible label — and on navigation surfaces a label is required.
Visible labels. Users don’t have to guess, and the labels translate cleanly to keyboard and screen reader users.
Icon-only navigation. Forces guessing, depends on hover for clarification, and fails on touch. Reserve icon-only for compact toolbars where every icon has an aria-label.
aria-label="Delete" or visually hidden text. Without it, screen readers announce the control as “button” with no purpose.