Lucide is the general-purpose interface collection. Its icons are
single-weight outlines on a 24×24 grid. The bundled SVGs use
currentColor, so Icons’ default auto mode emits a CSS mask and the
icon takes the surrounding text color.
<button type="button" aria-label="Search">
<span class="icon:lucide-search" aria-hidden="true"></span>
</button>Enable @presets "icons"; in the CSS entry and include the file in @source.
If the icon is meaningful by itself, give its element role="img" and an
appropriate aria-label; if nearby text or the parent control already names
it, keep aria-hidden="true".
Use the searchable Lucide catalogue
to confirm an exact name and copy its class. For example,
icon:lucide-alarm-clock is valid, while a guessed spelling may silently
emit no CSS. The source set is Lucide; TeaCSS’s
Icons overview explains sizing and rendering modes.