# Solid Icon

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

- Name: `solid-icon`
- Status: beta
- Categories: media
- File: the install writes `solid-icon.tsx` to your `ui` alias, `@/components/ui` by default.
- Gallery: https://arbokui.com/components/solid-icon
- Registry item: https://arbokui.com/r/solid-icon.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/solid-icon
   ```

## Use it for

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

## Avoid it for

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

## Props

- `name`: `SolidIconName`. Default `"home"`. For SolidIcon only: a name from solidIconCatalog. Named exports do not need this prop.
- `size`: `"sm" | "md" | "lg"`. Default `"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`. Default `"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.

## Accessibility

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

## Examples

### Individual React export

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

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

### From data

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

### Standalone SVG

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

const svg = getSolidIconSvg("folder");
```