Icons
A flexible SVG icon system using CSS masks that inherit color and scale with content.
On this page
Why CSS variables for icons?
Manage icons in CSS where they belong, not inline in HTML. This enables dynamic states, theme variations, JavaScript control, and cleaner markup:
/* Define icons once in CSS */
:root {
--icon-check: url('data:image/svg+xml;utf8,<svg>...</svg>');
--icon-plus: url('data:image/svg+xml;utf8,<svg>...</svg>');
--icon-close: url('data:image/svg+xml;utf8,<svg>...</svg>');
}
/* Use them anywhere */
.btn-add { --icon: var(--icon-plus); }
.btn-add:hover { --icon: var(--icon-check); } /* Change on hover! */
<!-- Clean HTML -->
<button class="btn btn-primary">
<span class="icon btn-add"></span>
Add item
</button>
Sizes
12px → 16px → 20px → 24px
<span class="icon icon-sm"></span> <!-- 12px -->
<span class="icon"></span> <!-- 16px (default) -->
<span class="icon icon-md"></span> <!-- 20px -->
<span class="icon icon-lg"></span> <!-- 24px -->
Color inheritance
Icons automatically inherit colors from Bootstrap's text utilities — one icon, any color:
Same icon, different Bootstrap color classes:
<!-- Just change the Bootstrap color class — icon follows automatically -->
<span class="icon text-primary" style="--icon: ..."></span>
<span class="icon text-success" style="--icon: ..."></span>
<span class="icon text-danger" style="--icon: ..."></span>
Works everywhere Bootstrap colors work:
No need for different colored SVG files — one icon works with all Bootstrap's color utilities.
JavaScript control
Easily change icons with JavaScript by setting the CSS variable:
// Change icon dynamically
const icon = document.querySelector('.icon');
icon.style.setProperty('--icon', 'url("data:image/svg+xml;utf8,<svg>...</svg>")');
// Toggle between states
if (isActive) {
element.style.setProperty('--icon', 'var(--icon-check)');
} else {
element.style.setProperty('--icon', 'var(--icon-plus)');
}
// Animate icon changes
button.addEventListener('click', async () => {
icon.style.setProperty('--icon', 'var(--icon-loading)');
await saveData();
icon.style.setProperty('--icon', 'var(--icon-check)');
});
No DOM manipulation needed — just change the CSS variable to instantly update any icon!
Dynamic icons
Change icons based on state, theme, or any CSS condition:
/* Different icons for different states */
.nav-item { --icon: var(--icon-folder); }
.nav-item.active { --icon: var(--icon-folder-open); }
.nav-item:hover { --icon: var(--icon-arrow-right); }
/* Theme-based icons */
[data-bs-theme="light"] .theme-icon { --icon: var(--icon-sun); }
[data-bs-theme="dark"] .theme-icon { --icon: var(--icon-moon); }
/* Responsive icons */
@media (max-width: 768px) {
.menu-icon { --icon: var(--icon-hamburger); }
}
@media (min-width: 769px) {
.menu-icon { --icon: var(--icon-grid); }
}
Benefits
- Dynamic states — Change icons on hover, active, or any CSS state
- Clean HTML — Icons defined in CSS, not cluttering markup
- Theme support — Different icons for light/dark modes
- No JavaScript — Pure CSS solution for icon management
- Works with any SVG — Bootstrap Icons, Feather, or custom SVGs