Dither Icon

beta

60 original monochrome icons with optional shifting dither dots, transparent backgrounds, and theme colors.

Preview

Texture

flat

dither

gradient

grain

Animate dots

Reduced motion keeps the dots still.

32px

64px

96px

neutral

brand

danger

success

warning

No new messages

New messages show here.

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/dither-icon

Illustrated navigation, empty states, and retro interfaces.
Use ditherIconNames to list all 60 icons, covering everyday controls, files, devices, objects, and nature.
Use animated to swap interior dots while outlines, detail lines, and the ink count in each tile stay fixed. Thin solid strokes stay still.
Provide a pause control for looping decorative animation. Use paused on one icon, or set --dither-icon-play-state: paused on a container to freeze a collection.
Use 32, 64, or 96px to keep the 32-pixel grid sharp.
getDitherIconSvg(name, fill) returns a still standalone SVG; fill accepts a hex color or defaults to currentColor. Inline SVG inherits text color; a downloaded file uses the viewer's default ink.

texture
dither draws the shape as dots, denser toward the bottom right, gradient as color that deepens the same way, and grain as still specks over a light wash. Hover fills each in to the solid shape, and shows a flat icon's dots. Left out, the icon follows the Texture around it, and is flat with none.
"flat" | "dither" | "gradient" | "grain"
animated
Dithered, loops four crisp dot patterns on the theme's pulse duration. No translation, scaling, or fading.
boolean · default false
paused
Freeze on the current animation frame. Has no effect on a still icon.
boolean · default false
fill
Optional SVG artwork fill. Use a chosen hex color to override the tone.
string
name
One of the 60 names in ditherIconNames.
DitherIconName · default "folder"
size
32, 64, or 96 pixels.
"sm" | "md" | "lg" · default "md"
tone
The theme color used for every ink pixel.
"neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"
title
Accessible name for a standalone icon. Omit beside equivalent text.
string
className
Classes merged last on the SVG.
string

Prop	Type	Default	What it does
texture	"flat" \| "dither" \| "gradient" \| "grain"	-	dither draws the shape as dots, denser toward the bottom right, gradient as color that deepens the same way, and grain as still specks over a light wash. Hover fills each in to the solid shape, and shows a flat icon's dots. Left out, the icon follows the Texture around it, and is flat with none.
animated	boolean	false	Dithered, loops four crisp dot patterns on the theme's pulse duration. No translation, scaling, or fading.
paused	boolean	false	Freeze on the current animation frame. Has no effect on a still icon.
fill	string	-	Optional SVG artwork fill. Use a chosen hex color to override the tone.
name	DitherIconName	"folder"	One of the 60 names in ditherIconNames.
size	"sm" \| "md" \| "lg"	"md"	32, 64, or 96 pixels.
tone	"neutral" \| "brand" \| "danger" \| "success" \| "warning"	"neutral"	The theme color used for every ink pixel.
title	string	-	Accessible name for a standalone icon. Omit beside equivalent text.
className	string	-	Classes merged last on the SVG.

Decorative icons are hidden from screen readers. A title makes the SVG a named image.
The SVG does not take keyboard focus. Icon-only actions need their own accessible label.
Reduced motion and the theme's Motion Off setting show the first frame without animating. Animation does not announce individual frames.
Dithered shading is decorative; it is not a contrast guarantee.

<DitherIcon name="planet" texture="dither" animated title="Planet" />

<div className="flex items-center gap-3"><DitherIcon name="folder" size="sm" /><span>Project files</span></div>

<DitherIcon name="trophy" size="lg" tone="brand" title="Trophy" />