Skip to main content
Decorative icons pair a rounded, tinted icon with text to add visual weight to a headline, card, or list row — without implying an action. Each example below is a starting point: copy it, then swap the icon and text for your use case.

​
Resources

Icon

Icon component anatomy, sizing, and usage guidance.

Decorative icon

Figma reference implementations for decorative icon lockups.

​
Interactive Card With Headline

Lead an interactive card with a decorative icon and a headline for a single, tappable entry point.

​
In Interactive Cards

Differentiate a set of interactive cards, each with a decorative icon, title, and supporting text.

​
Settings Page

Anchor each row of a settings or configuration list with a decorative icon, description, and action.

​
Headline Lockups

Pair a decorative icon with a headline across sizes, from large headings down to labels.
Last modified on September 14, 2026