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 November 4, 2026