Solid Icon

beta

24 original solid icons with softly squared silhouettes and transparent cutouts, in 16, 20, and 24px sizes.

Preview

16px20px24px

Choose a file before downloading.

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/solid-icon

Import an individual component, such as SolidFolder or SolidCalendar, for a button, menu, or sidebar.
Use SolidIcon with a name when the choice comes from data. This includes the whole collection.
Use sm at 16px, md at 20px, or lg at 24px. Color comes from the surrounding text or a theme token class.
Browse Solid Icon Library to search, copy SVG or React usage, and download an individual SVG.
getSolidIconSvg(name, fill?) returns standalone SVG markup. Pass a 3- or 6-digit hex value to keep a chosen color in the file; omit it for currentColor. Inline SVG inherits text color; an image file does not inherit its parent page's color.

Mixing solid and outline families within the same group of controls unless the difference conveys state.
Detailed illustrations: use Pixel Icon for retro artwork.
Using an icon alone for an unfamiliar action. Keep a visible label.

name
For SolidIcon only: a name from solidIconCatalog. Named exports do not need this prop.
SolidIconName · default "home"
size
16, 20, or 24px. Shared by SolidIcon and every named export.
"sm" | "md" | "lg" · default "md"
title
Accessible name for a meaningful standalone icon. Omit when adjacent text or its control provides the name.
string
fill
Native SVG fill. Use a chosen artwork color, or keep currentColor to inherit text color.
string · default "currentColor"
className
Extra classes; later classes win. Use a theme text token to set color.
string

Prop	Type	Default	What it does
name	SolidIconName	"home"	For SolidIcon only: a name from solidIconCatalog. Named exports do not need this prop.
size	"sm" \| "md" \| "lg"	"md"	16, 20, or 24px. Shared by SolidIcon and every named export.
title	string	-	Accessible name for a meaningful standalone icon. Omit when adjacent text or its control provides the name.
fill	string	"currentColor"	Native SVG fill. Use a chosen artwork color, or keep currentColor to inherit text color.
className	string	-	Extra classes; later classes win. Use a theme text token to set color.

Decorative icons are hidden from screen readers. With title they expose an image with that name.
Icons do not take keyboard focus. An icon-only button still needs its own aria-label.
Transparent cutouts reveal the actual surface underneath. Color inherits from text.

import { SolidFolder } from "@/components/ui/solid-icon";

<span className="flex items-center gap-2"><SolidFolder size="sm" />Project files</span>

<SolidIcon name="calendar" title="Calendar" />

import { getSolidIconSvg } from "@/components/ui/solid-icon";

const svg = getSolidIconSvg("folder");