Icon Design Rules for User Interfaces

Icons do a lot of work in interfaces. They make navigation faster to scan, add meaning to buttons, mark status, and save space. But they're also one of the quickest ways to make a product look unpolished. Mixed stroke weights, inconsistent corner radii, icons that are slightly blurry or off-center — users may not be able to name the problem, but they feel it.

Whether you're drawing custom icons or choosing and using an existing set, these rules help keep icons clear and consistent.

Rule 1: Use one icon set, or one style#

The most common icon problem is mixing sets. An outlined icon next to a filled icon from a different family, with different stroke weights and corner styles, immediately looks inconsistent.

Pick one style — outlined, filled, or duotone — and stick to it. If you use a public icon library, use it consistently. If you need icons it doesn't include, draw them to match its style exactly, or choose a library with broader coverage.

A common and useful exception: outlined icons for inactive states and filled versions for active states, such as in a tab bar. That's a deliberate system, not a mix.

Rule 2: Design on a grid with keylines#

Icons are usually designed on a square grid — commonly 24 by 24 pixels — with a few pixels of padding around the edges, often called the live area. Keylines are guide shapes inside the grid: a circle, a square, and portrait and landscape rectangles.

Keylines help icons of different shapes feel the same visual size. A circular icon drawn to the full width of the grid looks larger than a square icon drawn to the same width. Using keylines ensures consistent visual weight across the set.

Rule 3: Keep stroke weight consistent#

Choose one stroke weight for your base size — 1.5 or 2 pixels at 24 pixels are common — and use it everywhere. Inconsistent strokes are one of the most noticeable flaws in an icon set.

When icons are scaled to different sizes, decide whether strokes scale proportionally or stay fixed. Many systems provide separate optimized versions at small sizes, because a stroke that looks right at 24 pixels can look too heavy or too thin at 16 pixels.

Rule 4: Align to the pixel grid#

At small sizes, half-pixel positions create blurry edges. Align straight lines and stroke edges to whole pixels so icons render crisply, especially on lower-resolution screens. Test icons at their real display size, not just zoomed in.

Rule 5: Use consistent corners and terminals#

Match details across the set:

• Corner radius on shapes.
• Line endings: rounded or square caps.
• Joins: rounded or mitered.
• Angles: commonly multiples of 45 degrees for diagonal lines.

These details are what make a set feel like a family.

Rule 6: Balance optically, not just mathematically#

Geometric centering isn't always visual centering. A play icon — a triangle — looks off-center when it's mathematically centered, so it's usually nudged slightly to the right. Heavy shapes may need to be slightly smaller to match lighter ones. Trust your eyes and compare icons side by side.

Rule 7: Simplify for small sizes#

Icons are often shown at 16 to 24 pixels. Detail that looks nice in a large preview turns into noise when it's small. Reduce each icon to the essential shapes that communicate its meaning. If it's not recognizable at 16 pixels, simplify further.

Rule 8: Use familiar metaphors#

Users recognize standard icons quickly: a magnifying glass for search, a gear for settings, a trash can for delete, a house for home. Don't reinvent these for originality. Novel icons for common actions slow people down.

For less common actions, recognition drops sharply. Very few icons are universally understood without a label.

Rule 9: Pair icons with labels#

Icons alone are often ambiguous. A heart might mean "like," "save," or "favorite." A star might mean "rate" or "bookmark." Labels remove the guesswork.

• Use labels in navigation, especially tab bars.
• Use labels for less common actions.
• Use icon-only buttons only for very familiar actions or where space is extremely limited, such as editor toolbars, and add tooltips.

When in doubt, add the label.

Rule 10: Keep meaning consistent#

Once an icon means something, keep that meaning everywhere. If a pencil means "edit" in one place, don't use it for "write a note" elsewhere. And don't use two different icons for the same action. A consistent icon vocabulary is one users can learn.

Rule 11: Size icons on a scale#

Define a small set of icon sizes, such as 16, 20, 24, and 32 pixels, and pair them with text sizes:

• 16 pixels with small text and dense UI.
• 20 pixels with body text.
• 24 pixels for primary navigation and standalone icon buttons.

Align icons with text optically. Icon centers often need a slight vertical adjustment to look aligned with the text's x-height rather than its full line height.

Rule 12: Make icons accessible#

• Icon-only buttons need accessible labels so screen readers can announce them.
• Decorative icons next to text should be hidden from assistive technology to avoid repetition.
• Icons that carry meaning, such as status icons, should meet contrast requirements against their background — 3:1 for graphical objects.
• Don't rely on icon color alone to convey status; pair it with shape or text.

Rule 13: Build icons as components#

In Figma, build each icon as a component on a consistent frame size with the same naming convention, such as "icon/search" and "icon/settings." Use instance swap properties so designers can change icons inside buttons and menus without detaching. Flatten or outline strokes for export when your development workflow requires it, but keep editable source versions.

Name icons by what they depict and how they're typically used, and add search keywords in descriptions so designers can find them quickly.

Rule 14: Export cleanly#

When icons go to development:

• Export as SVG for the web.
• Remove unnecessary groups, hidden layers, and transforms.
• Use a consistent viewBox for every icon.
• Use currentColor for fills or strokes so developers can color icons with CSS.
• Check that exported icons render identically to the design.

Small details, big impression#

Icons are small, but there are a lot of them, and they appear on almost every screen. A consistent, well-crafted set makes an interface feel deliberate and trustworthy. An inconsistent one makes it feel assembled.

Choose one style, design on a grid, keep strokes and details consistent, simplify for small sizes, label when meaning isn't obvious, and build icons as a proper system. The result is a product that looks polished down to the smallest pixel.