Icons
LoopOS uses Google Material Symbols Rounded — a variable font with adjustable fill, weight, and optical size. Render via <span className="material-symbols-rounded">name</span>.
Setup
How to use
Load the Material Symbols Rounded variable font once in your document head — Google Fonts URL fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200— and the rest is plain HTML: a span with the icon name as its text content. Variable font axes (FILL, wght, opsz) are set via inline font-variation-settings.
TSX
// Canonical usage — a span with the material-symbols-rounded class.
// The icon NAME is the text content of the span (not an attribute).
// fontSize controls glyph size; color comes from text-* utilities.
<span
className="material-symbols-rounded text-content-secondary"
style={{ fontSize: 18 }}
>
search
</span>
// Tune fill / weight / optical size via font-variation-settings.
// FILL 0 → outline, FILL 1 → filled
// wght 100..700 (300, 400, 500, 600 are the weights we use in this app)
// opsz 20..48 (match opsz to fontSize for visual balance)
<span
className="material-symbols-rounded text-content"
style={{
fontSize: 22,
fontVariationSettings: "'FILL' 1, 'wght' 500, 'opsz' 24",
}}
>
favorite
</span>
// No <Icon /> wrapper exists — we use spans inline. If you find yourself
// repeating the same axis settings across a feature, factor a small wrapper
// for that feature; don't add a global one.search