Figma icon library

Icons carry more of an interface than most teams give them credit for. Row actions in a table, a nav rail, the glyph inside a button, the picture at the top of an empty state.

Change one of them for an icon drawn at a different weight or on a different grid and the screen looks slightly wrong in a way nobody can name. Consistency is most of the job, and nearly all of it gets decided before anyone draws an arrow.

One box, one stroke

Every icon in this library is drawn inside a 24x24px bounding box at a 2px stroke by default. That single rule is why a bar chart, a coffee cup and a chevron can sit in the same toolbar without any of them shouting, and it gives you a predictable optical size: a 24px icon beside 16px text lands where you expect it, every time.

If you need to draw one of your own to fill a gap, Figma's short project on building a reusable icon grid is the fastest way to match the geometry.

The part to copy is the safe area. Shapes that run to the edge of the box always read heavier than the ones that keep a margin, and across twenty icons in a row that difference is visible.

Nineteen categories and kebab-case names

The library is sorted into 19 categories: arrows, general, editor, media and devices, communication, files, finance and eCommerce, maps and travel, weather, layout, charts, security, development, education, users, shapes, images, time, and alerts and feedback. General is the largest by a wide margin, which is what happens when a category means everything a product needs and nothing else fits.

Names are lowercase and hyphenated, like arrow-block-down or alarm-clock-plus, and that string does three jobs: it is what you type into the instance swap menu, what comes out as an SVG filename, and what a developer imports.

Four styles exist in the full library, line, duocolor, duotone and solid, and 1,100+ line icons are downloadable as SVG from free icons. Two sets sit outside that grid: the card brand marks in payment icons, and the lines, patterns and hand-drawn arrows in miscellaneous assets.

Swapping an icon without detaching anything

Components across the kit expose their icons as instance swap properties, so changing the glyph inside a button, an alert or an input field is a dropdown selection rather than a trip into the layer tree. Figma's guide to swapping components and instances covers the mechanics, including the part that catches people out: not every override survives the swap.

These icons are also built to take color and stroke overrides from the instance, so a gray icon in a table and a brand-colored one in a nav item stay the same component with different values instead of becoming two components that drift apart over six months.

An icon on its own is a guess

Very few icons are genuinely universal. Home, print, the magnifying glass, and after that recognition falls off a cliff, which is the finding behind Nielsen Norman Group's work on icon usability. The rule that follows is unglamorous: label anything outside that handful, and keep the label visible rather than parking it in a tooltip.

In build, an icon sitting next to its own label is decorative and should be hidden from screen readers, as the W3C tutorial on decorative images sets out, while an icon that is the whole control needs the action as its accessible name. Making that call in the design file costs a comment. Making it in QA costs a sprint.

The same icons exist in code. Untitled UI React icons ship as React components carrying the same names as the Figma layers, copyable as JSX or installable from the package, so an icon picked in a mockup is findable in the codebase without anyone maintaining a translation table.