Skip to content

Rule · Design

Emoji used as icons

design/emoji-iconswarnvoid designupdated

Why it matters

Emoji in headings, buttons and feature cards render differently per platform, can't be styled or sized with the type, and read as placeholder UI.

How to fix it

Use a consistent SVG icon set (lucide, phosphor) sized to the text with currentColor, or no icon at all.

Example

tsx
<svg aria-hidden="true" class="size-5 text-fg-muted">…</svg>

void design reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.