Bootstrap Icons

Home / Guides / How to Customize SVG Icon Colors with CSS

How to Customize SVG Icon Colors with CSS

Colors are the most common reason to inline an icon. Use currentColor, CSS variables and hover states to restyle inline SVG icons.

Inherit the text color

Because strokes use currentColor, the icon follows the color of its parent element.

.btn { color: #7c5cff; }
.btn:hover { color: #ff5d8f; }

Use CSS variables

Variables let a theme switch icon tones in one place.

.icon { color: var(--icon-color, currentColor); }

Stroke width

Adjust line weight to match your typography.

.icon { stroke-width: 1.5; }

Hover and focus states

Style the parent, not the icon: change the color of the button or link on :hover and :focus-visible and the icon follows automatically. Add a short transition (150ms) so the change feels smooth, and keep a visible focus outline for keyboard users.

Dark mode support

Define icon colors as custom properties and redefine them inside @media (prefers-color-scheme: dark). For example, set --icon to near-black in the light theme and near-white in the dark theme, then use color: var(--icon) on your icon wrapper.

Fill versus stroke

These icons are drawn with strokes, so use the color and stroke properties rather than fill. Setting a fill on a line icon will flood closed shapes and usually looks wrong. If you need a filled look, add a separate shape behind the icon instead.

Quick checklist

  • Strokes use currentColor
  • Theme colors live in CSS variables
  • Hover and focus colors are set on the parent
  • Dark mode colors have enough contrast
  • No fill is applied to line icons

Common mistakes to avoid

Setting fill on a line icon, using different colors for the same state on different pages, and relying on color alone to show an active item. Another slip is styling the svg while the stroke is declared elsewhere, which makes a rule seem to do nothing.

Conclusion

Because the strokes use currentColor, most color work comes down to styling the parent element. Keep colors in CSS variables, add hover and dark mode rules in one place, and your whole icon set will follow your theme without editing a single file.

Frequently asked questions

Next steps

Try these ideas with real icons in the icon browser, or review the categories. See the license page for usage terms.

Related guides