What Stripe does
Stripe's Apps UI toolkit defines one Icon component with five sizes: xsmall 12 px, small 16 px, medium 20 px as default, large 32 px and xlarge 64 px. By default an icon takes the color of the text around it; a fill drawn from the text-and-icon color tokens is set only when the icon should contrast with its container. The named set pairs outlines with filled twins for state (checkCircle and checkCircleFilled, star and starFilled, pin and pinFilled, heart and heartFilled), and icons sit inside Button and Badge components. Icons are aria-hidden by default, and the docs advise text labels over icon-only controls.
Stripe's system, as published
- Sizes
- xsmall 12, small 16, medium 20 (default), large 32, xlarge 64 px
- Default Color
- inherits surrounding text
- Contrast Color
- fill from text-and-icon tokens
- State Pairs
- checkCircle / checkCircleFilled, starFilled, heartFilled, pinFilled, addCircleFilled, cancelCircleFilled
- Accessibility
- aria-hidden by default
Why it works
Defaulting icons to the surrounding text color keeps a UI calm; color is spent only where an icon must contrast. A filled twin of the same glyph shows state without adding a color.
Best for
Payments, fintech and SaaS dashboards, settings and status lists, products where icons sit in buttons and badges
What breaks it
- Coloring every icon
- Icon-only controls without labels
- A filled state that is a different glyph from its outline
Sources
- docs.stripe.com: Icon component: names, five sizes, fill prop, default color, use in Button and Badge, accessibility
- docs.stripe.com: Style guide: icons match surrounding text unless fill is set to contrast
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Stripe's look comes with it.
The recipe
- Draw icons from an open outline set at one of five sizes, 12, 16, 20, 32 or 64 px, defaulting to 20 px beside body text.
- Leave icon color unset so it takes the surrounding text color; inside an accent button that is
palette.on accent. - Set a contrasting fill only when the icon must stand apart from its container:
palette.positivefor success,palette.accentfor a call to action. - For every state that can be on or done, use the filled twin of the same outline (a check circle becomes a filled check circle) rather than recoloring.
- Keep strokes at about
typography.body.weight/ 267 px at 20 px with round caps, and soften corners tostyle.radius* 0.25. - Pair icons with a text label; hide decorative icons from screen readers.
What you'll need
- Which statuses or toggles appear
- The button styles icons sit in
Recipe as JSON
{
"recipe": {
"sizes_px": [
12,
16,
20,
32,
64
],
"default_size_px": 20,
"color": "currentColor",
"contrast_fill": "{palette.accent}",
"positive_fill": "{palette.positive}",
"in_accent_button": "{palette.on_accent}",
"state_variant": "filled",
"stroke_px_at_20": "{typography.body.weight} / 267",
"corner_radius_px": "{style.radius} * 0.25",
"linecap": "round",
"linejoin": "round"
},
"fallbacks": {
"palette.positive": "{palette.accent}",
"palette.on_accent": "{palette.paper}",
"style.radius": 8
},
"steps": [
"Draw icons from an open outline set at one of five sizes, 12, 16, 20, 32 or 64 px, defaulting to 20 px beside body text.",
"Leave icon color unset so it takes the surrounding text color; inside an accent button that is {palette.on_accent}.",
"Set a contrasting fill only when the icon must stand apart from its container: {palette.positive} for success, {palette.accent} for a call to action.",
"For every state that can be on or done, use the filled twin of the same outline (a check circle becomes a filled check circle) rather than recoloring.",
"Keep strokes at about {typography.body.weight} / 267 px at 20 px with round caps, and soften corners to {style.radius} * 0.25.",
"Pair icons with a text label; hide decorative icons from screen readers."
]
}See it working
- Stripe: The size scale and the icon reference, where outline and filled twins sit side by side
The lesson
Default icons to the surrounding text color and spend color or a filled twin only where state needs to show.
The move
Stripe's docs page "Icon component for Stripe Apps" shows the import line, a live preview with a plus-in-circle icon, and the code `<Icon name="addCircle" />`. The right rail lists Size, "Color and fill" and "Default color behavior" above Accessibility and "Icons in Button and Badge components".
Why it works
- Our readA one-line component with a name prop makes the default easy to follow, so the quiet, text-colored icon becomes the common case.
- Our readA separate "Default color behavior" entry shows that inheriting color is a documented rule rather than an accident.
- Our readA rail entry for icons in Button and Badge components points to where the color rule applies in context.
What not to copy
The size scale and icon names here are specific to Stripe Apps, so don't copy them. Keep the rule: inherit text color by default and use a filled variant to signal done or on.
