FOUNDATIONS
Iconography
One family, 5,504 glyphs, no exceptions. Mixing icon families is the fastest way to break a pixel aesthetic, so the system allows exactly one — pixelarticons — and types the names so a typo is a compile error.
The library
Four style variants per concept. Base is the outline form; -solid fills it; -sharp and -glyph are denser cuts for small sizes.
- TOTAL ICONS
- 5,504
- BASE
- 1,869
- SOLID
- 1,536
- SHARP / GLYPH
- 2,099
Outline form
Filled variant
Dense cuts
In use across the app
Every icon the codebase actually references, generated from apps/web, apps/mobile and packages/shared. 115 distinct icons in 462 call sites out of 5,504 available.
SHOWING 115 OF 115
archive
1 USE
arrow-left
2 USES
arrow-right
4 USES
bell
4 USES
bookmark
4 USES
bug
1 USE
bulletlist
2 USES
calendar
2 USES
camera
4 USES
card
1 USE
check
15 USES
checkbox
2 USES
checkbox-on
4 USES
checkbox-x
25 USES
chevron-down
1 USE
chevron-left
5 USES
chevron-right
10 USES
circle-alert
2 USES
clock
11 USES
close
26 USES
cloud-download
2 USES
comment
9 USES
comment-text
1 USE
copy
3 USES
crown
1 USE
delete
6 USES
diamond-gem
1 USE
dna
7 USES
earth
1 USE
edit
3 USES
external-link
4 USES
eye
7 USES
eye-off
1 USE
feather
1 USE
file-text
1 USE
fire
1 USE
flag
7 USES
flag-solid
2 USES
folder
2 USES
folder-plus
2 USES
forward
3 USES
game-controller
3 USES
gamepad
13 USES
gift
1 USE
globe
2 USES
goal
1 USE
grid-3x3
2 USES
hash
1 USE
heart
6 USES
hourglass
2 USES
image
6 USES
image-new
1 USE
inbox
2 USES
info-box
2 USES
joystick
1 USE
leaf
1 USE
lightbulb
1 USE
link
4 USES
list-box
6 USES
loader
34 USES
lock
12 USES
logout
2 USES
megaphone
2 USES
menu
1 USE
message-text
2 USES
mic
2 USES
minus
1 USE
monitor
1 USE
moon
1 USE
more-horizontal
2 USES
more-vertical
11 USES
package
1 USE
pen-square
9 USES
pin
6 USES
play
3 USES
plus
9 USES
plus-box
2 USES
reload
7 USES
repeat
1 USE
rss
4 USES
script
2 USES
search
9 USES
send
7 USES
shapes
1 USE
share
1 USE
shield-2
1 USE
shield-2-solid
1 USE
skull
1 USE
skull-solid
4 USES
smartphone
1 USE
sparkle
8 USES
sparkles
1 USE
speed-fast
1 USE
speed-medium
1 USE
speed-slow
1 USE
square-alert
1 USE
star-solid
2 USES
sword
1 USE
target
1 USE
thumbs-down
4 USES
thumbs-up
7 USES
trash
3 USES
trending-up
1 USE
trophy
7 USES
trophy-solid
1 USE
tv
1 USE
twitter-bird
3 USES
undo
2 USES
upload
3 USES
user
1 USE
user-plus
5 USES
users
15 USES
video
2 USES
warning-diamond
2 USES
zap
1 USE
How it renders
The icon is a <span> with the SVG applied as a CSS mask and bg-current for color. No SVG parsing, no per-icon component, no bundle cost that scales with how many icons a page uses — and it inherits text color for free.
import { PixelIcon } from "@/components/icons/pixel-icon";
// name is typed as PixelIconName — autocomplete covers all
// 5,504 icons. Size via className, color via bg-*.
<PixelIcon name="trophy-solid" className="size-5 bg-action" />Audit: two renderers ship at once
Both of these are named PixelIcon and both are imported as PixelIcon. Which one a file gets depends entirely on whether the import path says icons/ or ui/.
CANONICAL
apps/web/components/icons/pixel-icon.tsx- Strategy
- CSS mask
- Coverage
- 5,504 icons
- Imported by
- 53 files
- Unknown name
- Compile error
LEGACY
apps/web/components/ui/pixel-icon.tsx- Strategy
- Hand-maintained icon map
- Coverage
- 74 icons (1%)
- Imported by
- 12 files
- Unknown name
- Renders the name as text
WHY IT MATTERS
The legacy component types its name prop as string and falls back to <span>{name}</span>when a lookup misses. A typo doesn't fail the build and doesn't render a missing-icon placeholder — it renders the literal string trophy-solid into the UI, in whatever font that region uses. The canonical component makes the same mistake a type error.
Fix: migrate the 12 remaining importers to @/components/icons/pixel-icon and delete the legacy module. The names differ (PascalCase map keys vs. kebab-case file names), so this is a real migration, not a path rename.