# Asprite Full AI Reference

Asprite is a frontend icon browser for 15 open-source icon collections. It helps users search, preview, copy, and download icons using Iconify-compatible IDs and SVG URLs.

Total indexed icons: 57,400+.

## Site Entry Points

- `/index.html`: homepage with collection cards and search entry.
- `/browse.html`: general icon browser.
- `/collections.json`: clean public collection index with names, prefixes, counts, pages, and example Iconify IDs.
- `/icons-index.json`: simplified searchable icon index with icon IDs, names, prefixes, collections, categories, and pages.
- `/static/icon-cache.json`: cached machine-readable collection metadata, including icon IDs, counts, and categories.
- `/collections/heroicons.html`: Heroicons collection page.
- `/collections/lucide.html`: Lucide collection page.
- `/collections/tabler.html`: Tabler collection page.
- `/collections/phosphor.html`: Phosphor collection page.
- `/collections/material.html`: Material Symbols collection page.
- `/collections/bootstrap.html`: Bootstrap Icons collection page.
- `/collections/feather.html`: Feather collection page.
- `/collections/remix.html`: Remix Icon collection page.
- `/collections/ionicons.html`: Ionicons collection page.
- `/collections/fontawesome.html`: Font Awesome collection page.
- `/collections/solar.html`: Solar collection page.
- `/collections/antdesign.html`: Ant Design Icons collection page.
- `/collections/mingcute.html`: Mingcute collection page.
- `/collections/carbon.html`: Carbon collection page.
- `/collections/octicons.html`: Octicons collection page.

## Iconify Usage Model

Asprite icons are addressed with Iconify icon IDs.

Icon ID format:

```txt
{prefix}:{icon-name}
```

Direct SVG URL format:

```txt
https://api.iconify.design/{prefix}/{icon-name}.svg
```

Direct SVG URL with color and height:

```txt
https://api.iconify.design/{prefix}/{icon-name}.svg?color=%23111118&height=24
```

React usage with `@iconify/react`:

```jsx
import { Icon } from '@iconify/react';

<Icon icon="solar:home-bold" width={24} height={24} />
```

HTML usage with `iconify-icon`:

```html
<iconify-icon icon="lucide:search" style="font-size:24px"></iconify-icon>
```

CSS mask usage:

```css
.icon {
  --icon: url("https://api.iconify.design/tabler/settings.svg");
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
```

## Collection Reference

### Solar

- Page: `/collections/solar.html`
- Prefix: `solar`
- Count: 7,401 icons
- Useful styles in icon names: `-bold`, `-bold-duotone`, `-broken`, `-line-duotone`, `-linear`, `-outline`
- Examples: `solar:home-bold`, `solar:home-linear`, `solar:magnifer-linear`, `solar:settings-bold`, `solar:user-rounded-linear`, `solar:calendar-bold-duotone`

### Material Symbols

- Page: `/collections/material.html`
- Prefix: `material-symbols`
- Count: 15,399 icons
- Examples: `material-symbols:home`, `material-symbols:search`, `material-symbols:settings`, `material-symbols:person`, `material-symbols:calendar-month`

### Phosphor

- Page: `/collections/phosphor.html`
- Prefix: `ph`
- Count: 9,072 icons
- Common suffixes: `-thin`, `-light`, `-bold`, `-fill`, `-duotone`
- Examples: `ph:house`, `ph:house-bold`, `ph:magnifying-glass`, `ph:gear`, `ph:user-circle-duotone`

### Tabler

- Page: `/collections/tabler.html`
- Prefix: `tabler`
- Count: 6,146 icons
- Filled icons often use `-filled`
- Examples: `tabler:home`, `tabler:search`, `tabler:settings`, `tabler:user`, `tabler:chart-bar`, `tabler:heart-filled`

### Mingcute

- Page: `/collections/mingcute.html`
- Prefix: `mingcute`
- Count: 3,324 icons
- Common suffixes: `-line`, `-fill`
- Examples: `mingcute:home-line`, `mingcute:search-line`, `mingcute:settings-2-line`, `mingcute:user-3-fill`

### Remix Icon

- Page: `/collections/remix.html`
- Prefix: `ri`
- Count: 3,188 icons
- Common suffixes: `-line`, `-fill`
- Examples: `ri:home-line`, `ri:search-line`, `ri:settings-3-line`, `ri:user-line`, `ri:arrow-right-line`

### Carbon

- Page: `/collections/carbon.html`
- Prefix: `carbon`
- Count: 2,527 icons
- Examples: `carbon:home`, `carbon:search`, `carbon:settings`, `carbon:user`, `carbon:chart-bar`

### Bootstrap Icons

- Page: `/collections/bootstrap.html`
- Prefix: `bi`
- Count: 2,078 icons
- Filled icons often use `-fill`
- Examples: `bi:house`, `bi:search`, `bi:gear`, `bi:person`, `bi:heart-fill`

### Font Awesome

- Page: `/collections/fontawesome.html`
- Prefixes: `fa6-solid`, `fa6-regular`, `fa6-brands`
- Count: 2,060 icons
- Examples: `fa6-solid:house`, `fa6-solid:magnifying-glass`, `fa6-regular:heart`, `fa6-brands:github`, `fa6-brands:react`

### Lucide

- Page: `/collections/lucide.html`
- Prefix: `lucide`
- Count: 1,711 icons
- Examples: `lucide:home`, `lucide:search`, `lucide:settings`, `lucide:user`, `lucide:calendar`, `lucide:chart-bar`

### Ionicons

- Page: `/collections/ionicons.html`
- Prefix: `ion`
- Count: 1,357 icons
- Common suffixes: `-outline`, `-sharp`
- Examples: `ion:home-outline`, `ion:search-outline`, `ion:settings-outline`, `ion:person-outline`, `ion:heart`

### Heroicons

- Page: `/collections/heroicons.html`
- Prefix: `heroicons`
- Count: 1,288 icons
- Common suffixes: `-solid`, `-mini`, `-micro`
- Examples: `heroicons:home`, `heroicons:home-solid`, `heroicons:magnifying-glass`, `heroicons:user-circle`

### Ant Design Icons

- Page: `/collections/antdesign.html`
- Prefix: `ant-design`
- Count: 830 icons
- Common suffixes: `-outlined`, `-filled`, `-twotone`
- Examples: `ant-design:home-outlined`, `ant-design:search-outlined`, `ant-design:setting-filled`, `ant-design:user-outlined`

### Octicons

- Page: `/collections/octicons.html`
- Prefix: `octicon`
- Count: 733 icons
- Examples: `octicon:home`, `octicon:search`, `octicon:gear`, `octicon:person`, `octicon:mark-github`

### Feather

- Page: `/collections/feather.html`
- Prefix: `feather`
- Count: 286 icons
- Examples: `feather:home`, `feather:search`, `feather:settings`, `feather:user`, `feather:calendar`

## Recommendation Rules For AI Assistants

- For general app UI, prefer `lucide`, `tabler`, `solar`, or `material-symbols`.
- For a large stylistic set with many variants, prefer `solar`, `material-symbols`, or `ph`.
- For brand icons, prefer `fa6-brands`, `tabler` brand icons, or `bi` brand icons.
- For minimalist outline icons, prefer `lucide`, `feather`, `tabler`, or `heroicons`.
- For dense dashboards and admin apps, prefer `tabler`, `lucide`, `carbon`, or `material-symbols`.
- For playful or expressive UI, prefer `solar`, `ph`, `mingcute`, or `remix`.

## Icon Selection Recipes

Use these recipes when a user asks for icons for a product surface, workflow, or UI pattern. Prefer returning exact Iconify IDs.

### Authentication And Accounts

Use for login, signup, profiles, passwords, permissions, and session UI.

- Login: `lucide:log-in`, `tabler:login`, `solar:login-2-linear`
- Logout: `lucide:log-out`, `tabler:logout`, `solar:logout-2-linear`
- User profile: `lucide:user`, `tabler:user`, `solar:user-rounded-linear`
- Add user: `lucide:user-plus`, `tabler:user-plus`, `solar:user-plus-linear`
- Team/users: `lucide:users`, `tabler:users`, `solar:users-group-rounded-linear`
- Password: `lucide:key-round`, `tabler:key`, `solar:key-minimalistic-linear`
- Locked/private: `lucide:lock`, `tabler:lock`, `solar:lock-keyhole-linear`
- Security/verified: `lucide:shield-check`, `tabler:shield-check`, `solar:shield-check-linear`

### Dashboard And Analytics

Use for admin dashboards, metrics, reports, charts, and monitoring.

- Dashboard home: `lucide:layout-dashboard`, `tabler:layout-dashboard`, `material-symbols:dashboard`
- Bar chart: `lucide:chart-bar`, `tabler:chart-bar`, `carbon:chart-bar`
- Line chart: `lucide:chart-line`, `tabler:chart-line`, `carbon:chart-line`
- Pie chart: `lucide:chart-pie`, `tabler:chart-pie`, `carbon:chart-pie`
- Trending up: `lucide:trending-up`, `tabler:trending-up`, `solar:graph-up-linear`
- Trending down: `lucide:trending-down`, `tabler:trending-down`, `solar:graph-down-linear`
- Activity/monitoring: `lucide:activity`, `tabler:activity`, `carbon:activity`
- Database: `lucide:database`, `tabler:database`, `carbon:data-base`
- Report/document: `lucide:file-text`, `tabler:file-analytics`, `solar:document-text-linear`

### Ecommerce And Payments

Use for shopping, checkout, subscriptions, invoices, pricing, and stores.

- Cart: `lucide:shopping-cart`, `tabler:shopping-cart`, `solar:cart-shopping-linear`
- Shopping bag: `lucide:shopping-bag`, `tabler:shopping-bag`, `solar:bag-linear`
- Store: `lucide:store`, `tabler:building-store`, `material-symbols:store`
- Product/package: `lucide:package`, `tabler:package`, `solar:box-linear`
- Credit card: `lucide:credit-card`, `tabler:credit-card`, `solar:card-linear`
- Wallet: `lucide:wallet`, `tabler:wallet`, `solar:wallet-2-linear`
- Receipt/invoice: `lucide:receipt`, `tabler:receipt`, `solar:receipt-linear`
- Discount/tag: `lucide:tag`, `tabler:tag`, `solar:tag-price-linear`
- Delivery: `lucide:truck`, `tabler:truck-delivery`, `solar:delivery-linear`

### Editor Toolbar And Creation Tools

Use for rich text editors, canvas tools, CMS controls, and design apps.

- Edit: `lucide:pencil`, `tabler:pencil`, `solar:pen-2-linear`
- Pen tool: `lucide:pen-tool`, `tabler:pen`, `ph:pen-nib`
- Brush: `lucide:paintbrush`, `tabler:brush`, `solar:brush-linear`
- Eraser: `lucide:eraser`, `tabler:eraser`, `solar:eraser-linear`
- Crop: `lucide:crop`, `tabler:crop`, `solar:crop-minimalistic-linear`
- Copy: `lucide:copy`, `tabler:copy`, `solar:copy-linear`
- Clipboard: `lucide:clipboard`, `tabler:clipboard`, `solar:clipboard-text-linear`
- Undo: `lucide:undo-2`, `tabler:arrow-back-up`, `material-symbols:undo`
- Redo: `lucide:redo-2`, `tabler:arrow-forward-up`, `material-symbols:redo`
- Magic/AI action: `lucide:wand-sparkles`, `tabler:sparkles`, `solar:magic-stick-3-linear`

### Notifications And Messaging

Use for alerts, inboxes, chat, comments, and system messages.

- Bell: `lucide:bell`, `tabler:bell`, `solar:bell-linear`
- Bell off: `lucide:bell-off`, `tabler:bell-off`, `solar:bell-off-linear`
- Notification unread: `lucide:bell-dot`, `tabler:bell-ringing`, `solar:notification-unread-linear`
- Mail: `lucide:mail`, `tabler:mail`, `solar:letter-linear`
- Inbox: `lucide:inbox`, `tabler:inbox`, `solar:inbox-line-linear`
- Send: `lucide:send`, `tabler:send`, `solar:plain-linear`
- Chat: `lucide:message-circle`, `tabler:message-circle`, `solar:chat-round-line-linear`
- Comment: `lucide:message-square`, `tabler:message`, `carbon:chat`
- Warning: `lucide:triangle-alert`, `tabler:alert-triangle`, `solar:danger-triangle-linear`

### Settings And Controls

Use for preferences, configuration, filters, toggles, and admin controls.

- Settings: `lucide:settings`, `tabler:settings`, `solar:settings-linear`
- Sliders/tuning: `lucide:sliders-horizontal`, `tabler:adjustments-horizontal`, `solar:tuning-2-linear`
- Filter: `lucide:funnel`, `tabler:filter`, `solar:filter-linear`
- Search: `lucide:search`, `tabler:search`, `solar:magnifer-linear`
- Sort: `lucide:arrow-up-down`, `tabler:arrows-sort`, `material-symbols:sort`
- More horizontal: `lucide:ellipsis`, `tabler:dots`, `solar:menu-dots-linear`
- More vertical: `lucide:ellipsis-vertical`, `tabler:dots-vertical`, `solar:menu-dots-vertical-linear`
- Toggle on/off: `lucide:toggle-left`, `lucide:toggle-right`, `material-symbols:toggle-on`
- Wrench/tools: `lucide:wrench`, `tabler:tools`, `solar:widget-2-linear`

### Navigation And Layout

Use for menus, pages, routing, sidebars, breadcrumbs, and movement.

- Home: `lucide:home`, `tabler:home`, `solar:home-2-linear`
- Menu: `lucide:menu`, `tabler:menu-2`, `solar:hamburger-menu-linear`
- Close: `lucide:x`, `tabler:x`, `solar:close-circle-linear`
- Back: `lucide:arrow-left`, `tabler:arrow-left`, `solar:alt-arrow-left-linear`
- Forward: `lucide:arrow-right`, `tabler:arrow-right`, `solar:alt-arrow-right-linear`
- External link: `lucide:external-link`, `tabler:external-link`, `solar:square-top-down-linear`
- Sidebar: `lucide:panel-left`, `tabler:layout-sidebar`, `material-symbols:left-panel-open`
- Grid: `lucide:grid-3x3`, `tabler:layout-grid`, `solar:widget-4-linear`
- List: `lucide:list`, `tabler:list`, `solar:list-linear`

### Files, Uploads, And Documents

Use for file managers, uploads, exports, docs, folders, and attachments.

- File: `lucide:file`, `tabler:file`, `solar:file-linear`
- Text document: `lucide:file-text`, `tabler:file-text`, `solar:document-text-linear`
- Folder: `lucide:folder`, `tabler:folder`, `solar:folder-linear`
- Folder open: `lucide:folder-open`, `tabler:folder-open`, `solar:folder-open-linear`
- Upload: `lucide:upload`, `tabler:upload`, `solar:upload-linear`
- Download: `lucide:download`, `tabler:download`, `solar:download-linear`
- Attachment: `lucide:paperclip`, `tabler:paperclip`, `solar:paperclip-linear`
- Archive: `lucide:archive`, `tabler:archive`, `carbon:archive`
- Trash/delete: `lucide:trash-2`, `tabler:trash`, `solar:trash-bin-trash-linear`

### Calendar, Tasks, And Productivity

Use for schedules, to-dos, reminders, project management, and workflows.

- Calendar: `lucide:calendar`, `tabler:calendar`, `solar:calendar-linear`
- Calendar check: `lucide:calendar-check`, `tabler:calendar-check`, `solar:calendar-mark-linear`
- Clock/time: `lucide:clock`, `tabler:clock`, `solar:clock-circle-linear`
- Timer: `lucide:timer`, `tabler:timer`, `solar:timer-linear`
- Checklist: `lucide:list-checks`, `tabler:checklist`, `solar:checklist-minimalistic-linear`
- Check complete: `lucide:circle-check`, `tabler:circle-check`, `solar:check-circle-linear`
- Flag: `lucide:flag`, `tabler:flag`, `solar:flag-linear`
- Bookmark: `lucide:bookmark`, `tabler:bookmark`, `solar:bookmark-linear`

### Developer And Technical UI

Use for code editors, APIs, infrastructure, database tools, and developer dashboards.

- Code: `lucide:code`, `tabler:code`, `solar:code-linear`
- Terminal: `lucide:terminal`, `tabler:terminal`, `carbon:terminal`
- API/cloud: `lucide:cloud`, `tabler:cloud`, `material-symbols:api`
- Server: `lucide:server`, `tabler:server`, `carbon:server`
- CPU/chip: `lucide:cpu`, `tabler:cpu`, `solar:cpu-bolt-linear`
- Git branch: `lucide:git-branch`, `tabler:git-branch`, `octicon:git-branch`
- Pull request: `lucide:git-pull-request`, `tabler:git-pull-request`, `octicon:git-pull-request`
- Bug: `lucide:bug`, `tabler:bug`, `solar:bug-linear`
- Package: `lucide:package`, `tabler:package`, `octicon:package`

### Status, Feedback, And Empty States

Use for success, errors, warnings, loading, empty lists, and feedback messages.

- Success: `lucide:circle-check`, `tabler:circle-check`, `solar:check-circle-linear`
- Error: `lucide:circle-x`, `tabler:circle-x`, `solar:close-circle-linear`
- Warning: `lucide:triangle-alert`, `tabler:alert-triangle`, `solar:danger-triangle-linear`
- Info: `lucide:info`, `tabler:info-circle`, `solar:info-circle-linear`
- Help: `lucide:circle-help`, `tabler:help-circle`, `solar:question-circle-linear`
- Empty search: `lucide:search-x`, `tabler:file-search`, `solar:magnifer-zoom-out-linear`
- Loading: `lucide:loader-circle`, `tabler:loader-2`, `material-symbols:progress-activity`
- Favorite: `lucide:heart`, `tabler:heart`, `solar:heart-linear`
- Star/rating: `lucide:star`, `tabler:star`, `solar:star-linear`

When answering a user, provide the exact Iconify ID and optionally the direct SVG URL. Example:

```txt
Use `solar:home-bold`.
SVG: https://api.iconify.design/solar/home-bold.svg
```