---
title: "Emoji used as icons (design/emoji-icons)"
description: "design/emoji-icons: Emoji in headings, buttons and feature cards render differently per platform, can't be styled or sized with the type, and read as…"
canonical: https://void-design.vercel.app/rules/design/emoji-icons
lastModified: 2026-09-16
---

# Emoji used as icons

`design/emoji-icons` · severity **warn** · category Design · detected by `void design` and `void audit`

## 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

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

## More design rules

`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.

- `palette-sprawl` Too many distinct colors — [design/palette-sprawl](https://void-design.vercel.app/rules/design/palette-sprawl)
- `multiple-accents` More than one accent hue — [design/multiple-accents](https://void-design.vercel.app/rules/design/multiple-accents)
- `gradient-text` Gradient-filled heading text — [design/gradient-text](https://void-design.vercel.app/rules/design/gradient-text)
- `purple-gradient` Purple/indigo gradient background — [design/purple-gradient](https://void-design.vercel.app/rules/design/purple-gradient)
- `spacing-off-grid` Spacing values are off the 4px grid — [design/spacing-off-grid](https://void-design.vercel.app/rules/design/spacing-off-grid)
- `radius-sprawl` Too many different corner radii — [design/radius-sprawl](https://void-design.vercel.app/rules/design/radius-sprawl)
- `no-dark-mode` No dark mode support — [design/no-dark-mode](https://void-design.vercel.app/rules/design/no-dark-mode)
- `color-scheme-missing` color-scheme is not declared — [design/color-scheme-missing](https://void-design.vercel.app/rules/design/color-scheme-missing)

Detected by `void design` and `void audit`. Explain it in a terminal: `void rules design/emoji-icons`