# Appica Icons for React

> 5016 tree-shakeable SVG icons for React (`@appica/icons-react`) in 37 categories, sourced from Tabler Icons, Hugeicons and custom designs.

This file is for AI agents: install and usage, the naming rule, and how to look up an icon's exact name without loading the whole catalog. The same icons ship for Svelte (https://appica.dev/ui/icons/svelte.md). What changed in each release: https://github.com/appica-dev/appica-icons/blob/main/packages/react/CHANGELOG.md

## Install

`pnpm add @appica/icons-react` (npm / yarn / bun also work). Requires React 19+, ESM only.

## Usage

```tsx
import { Bold } from '@appica/icons-react'

export function Example() {
  return <Bold size={24} strokeWidth={1.5} />
}
```

- Every icon is a tree-shakeable named export from the package root. Each is also a module of its own at `@appica/icons-react/icons/<category>/<name>` (default and named export); there are no category barrels.
- Props: `size` (number | string, default `24`), `color` (sets `currentColor`), `strokeWidth` (default `1.5`), `className` (appended to the base `appica-icon` class), plus the full `SVGProps<SVGSVGElement>` surface.
- Icons are `aria-hidden` by default (decorative). Give a standalone interactive icon an accessible name: `aria-label` on its button, or `aria-hidden={false} aria-label="…" role="img"` on the icon.
- `createIcon` builds custom icons in the same style; `IconProps` and `IconComponent` type your own wrappers.

## Names

- Every icon has a kebab-case name, e.g. `arrow-back-up`. Its identifier is the PascalCase form, `ArrowBackUp` - the same in every integration.
- Filled variants are separate icons with a `-filled` suffix: `star` → `Star`, `star-filled` → `StarFilled`.
- Every icon is also exported with an `Icon` suffix (`Bold` and `BoldIcon` are the same component), for when a name clashes with your own.
- 2 identifiers keep an `_` between adjacent digit segments: `sort-0-9` → `Sort0_9`, `sort-9-0` → `Sort9_0`.

## Find an icon

Don't guess a name: an identifier that doesn't exist breaks the import. Look it up, cheapest first:

1. **Search** by what the icon shows or means. Returns matching icons with identifier, category and keywords; several words must all match: https://appica.dev/ui/icons/search.md?q=cloud+upload
2. **The installed package.** Each icon is one file, so its file names are the catalog: `node_modules/@appica/icons-react/dist/icons/<category>/<name>.js`. For example `ls node_modules/@appica/icons-react/dist/icons/arrows`, or `find node_modules/@appica/icons-react/dist/icons -name '*upload*.js'`.
3. **A category's list**, linked below: every name in that category, one per line.

## Categories

5016 icons in 37 categories:

- [Animals](https://appica.dev/ui/icons/catalog/animals.md): 29
- [Arrows](https://appica.dev/ui/icons/catalog/arrows.md): 421
- [Awards](https://appica.dev/ui/icons/catalog/awards.md): 42
- [Brands](https://appica.dev/ui/icons/catalog/brands.md): 382
- [Buildings](https://appica.dev/ui/icons/catalog/buildings.md): 106
- [Charts](https://appica.dev/ui/icons/catalog/charts.md): 58
- [Clothing & Accessories](https://appica.dev/ui/icons/catalog/clothing-and-accessories.md): 38
- [Communication](https://appica.dev/ui/icons/catalog/communication.md): 152
- [Computing & Development](https://appica.dev/ui/icons/catalog/computing-and-development.md): 60
- [Database](https://appica.dev/ui/icons/catalog/database.md): 49
- [Design](https://appica.dev/ui/icons/catalog/design.md): 362
- [Devices](https://appica.dev/ui/icons/catalog/devices.md): 359
- [Document](https://appica.dev/ui/icons/catalog/document.md): 281
- [Ecommerce](https://appica.dev/ui/icons/catalog/ecommerce.md): 159
- [Emoji](https://appica.dev/ui/icons/catalog/emoji.md): 62
- [Food & Drink](https://appica.dev/ui/icons/catalog/food-and-drink.md): 110
- [Furniture](https://appica.dev/ui/icons/catalog/furniture.md): 22
- [Games & Toys](https://appica.dev/ui/icons/catalog/games-and-toys.md): 92
- [Gender](https://appica.dev/ui/icons/catalog/gender.md): 18
- [Gestures](https://appica.dev/ui/icons/catalog/gestures.md): 17
- [Git](https://appica.dev/ui/icons/catalog/git.md): 16
- [Health & Medical](https://appica.dev/ui/icons/catalog/health-and-medical.md): 99
- [Kitchen & Cooking](https://appica.dev/ui/icons/catalog/kitchen-and-cooking.md): 37
- [Laundry](https://appica.dev/ui/icons/catalog/laundry.md): 55
- [Map & Travel](https://appica.dev/ui/icons/catalog/map-and-travel.md): 227
- [Math](https://appica.dev/ui/icons/catalog/math.md): 54
- [Media](https://appica.dev/ui/icons/catalog/media.md): 210
- [Nature](https://appica.dev/ui/icons/catalog/nature.md): 41
- [Shapes](https://appica.dev/ui/icons/catalog/shapes.md): 240
- [Sport & Hobby](https://appica.dev/ui/icons/catalog/sport-and-hobby.md): 64
- [Symbols](https://appica.dev/ui/icons/catalog/symbols.md): 45
- [System](https://appica.dev/ui/icons/catalog/system.md): 675
- [Text Editing](https://appica.dev/ui/icons/catalog/text-editing.md): 195
- [Tools](https://appica.dev/ui/icons/catalog/tools.md): 32
- [Transport](https://appica.dev/ui/icons/catalog/transport.md): 130
- [Weather](https://appica.dev/ui/icons/catalog/weather.md): 65
- [Zodiac](https://appica.dev/ui/icons/catalog/zodiac.md): 12