Icons
Wintermuted UI uses Lucide Icons —
a clean, open-source icon library with 1,500+ icons available as SVG or framework components.
Icons are rendered at 16×16 by default, inheriting currentColor for seamless
theming.
Library: lucide.dev · License: ISC
Installation
CDN (static HTML)
Add the Lucide UMD bundle before your script, then call lucide.createIcons() to
replace <i data-lucide="name"> elements with inline SVG.
<!-- 1. Load Lucide -->
<script src="https://unpkg.com/lucide@0.475.0/dist/umd/lucide.min.js" crossorigin></script>
<!-- 2. Place icon placeholders -->
<i data-lucide="sun"></i>
<i data-lucide="moon"></i>
<!-- 3. Activate -->
<script>
lucide.createIcons();
</script>npm (React / Vue / Svelte)
npm install lucide-react # React
npm install lucide-vue-next # Vue 3
npm install lucide-svelte # Svelteimport { Sun, Moon, Settings } from 'lucide-react';
function ThemeToggle() {
return <button><Moon size={16} /> Dark</button>;
}Sizes
Lucide icons accept a size prop (framework) or a CSS width/height
attribute. All sizes below use currentColor for the stroke.
<i data-lucide="star" width="16" height="16"></i>
<i data-lucide="star" width="24" height="24"></i>
<i data-lucide="star" width="32" height="32"></i>Color & Stroke
Icons inherit currentColor by default. Wrap in a color-bearing
element or set stroke / stroke-width directly on the SVG for
customisation.
Icon + Label Button
The theme toggle in the showcase topbar uses this pattern: an icon followed by a text label,
both inside a single <button>. The icon is marked
aria-hidden="true" and the button carries an aria-label.
<button class="btn btn-secondary icon-btn" type="button"
aria-label="Switch to dark theme">
<i data-lucide="moon" width="14" height="14" aria-hidden="true"></i>
<span>Dark</span>
</button>