# Icons

> Available icons for use in islands and components

Canonical URL: https://fa7e86e3d553:3005/pages/icons

60+ icons available for use in islands and components. Icons render as Lucide-based SVGs — scalable, accessible, and themed to match your brand.

## Usage

Use the catalog only when the current island schema accepts a free-form
`icon` field, such as an ingredient, funnel option, or footer/social record.
Read that island's schema before supplying a name. Do not invent an island or
prop from an older example.

`FAQ.icon` is a separate fixed enum: `"plus"`, `"chevron"`, or `"none"`.

## Icon Catalog

### Commerce (5)

| Icon | Keywords |
|------|----------|
| `cart` | shopping, bag, buy |
| `credit-card` | payment, checkout |
| `tag` | price, sale, discount |
| `gift` | present, bonus |
| `shopping-bag` | purchase, order |

### Trust (7)

| Icon | Keywords |
|------|----------|
| `shield` | security, protection, safe |
| `shield-check` | verified, secure |
| `lock` | secure, private, safe |
| `check-circle` | verified, approved, confirmed |
| `star` | rating, favorite, quality |
| `award` | badge, certification, quality |
| `heart` | favorite, love, like |

### Shipping (3)

| Icon | Keywords |
|------|----------|
| `truck` | delivery, shipping, fast |
| `box` | package, product |
| `refresh-cw` | return, exchange |

### Nature (5)

| Icon | Keywords |
|------|----------|
| `leaf` | eco, organic, natural |
| `sun` | bright, day, light |
| `moon` | night, dark |
| `cloud` | weather, sky |
| `zap` | energy, power, lightning |

### UI (11)

| Icon | Keywords |
|------|----------|
| `x` | close, cancel, remove |
| `check` | confirm, yes, done |
| `chevron-down` | dropdown, expand |
| `chevron-up` | collapse, less |
| `chevron-left` | back, previous |
| `chevron-right` | forward, next |
| `arrow-right` | forward, next, go |
| `arrow-left` | back, previous |
| `external-link` | open, new-tab |
| `info` | information, help |
| `alert-circle` | warning, error, notice |

### Navigation (4)

| Icon | Keywords |
|------|----------|
| `menu` | hamburger, nav, bars |
| `search` | find, magnify, lookup |
| `home` | house, start, main |
| `map-pin` | location, place, marker |

### People (3)

| Icon | Keywords |
|------|----------|
| `user` | account, profile, person |
| `users` | team, group, people |
| `user-check` | verified, approved |

### Media (5)

| Icon | Keywords |
|------|----------|
| `play` | video, start, watch |
| `pause` | stop, wait |
| `volume` | sound, audio, speaker |
| `camera` | photo, image, picture |
| `image` | picture, photo, gallery |

### Misc (22)

| Icon | Keywords |
|------|----------|
| `phone` | call, contact, mobile |
| `mail` | email, message, contact |
| `message-circle` | chat, talk, comment |
| `clock` | time, schedule, watch |
| `calendar` | date, schedule, event |
| `globe` | world, international, web |
| `download` | save, export, file |
| `upload` | send, import, file |
| `settings` | config, options, gear |
| `trash` | delete, remove, bin |
| `edit` | pencil, modify, change |
| `share` | send, export, forward |
| `link` | chain, url, connect |
| `bookmark` | save, favorite, mark |
| `flag` | report, mark, banner |
| `bell` | notification, alert, ring |
| `eye` | view, see, show |
| `eye-off` | hide, hidden, invisible |
| `filter` | sort, refine, funnel |
| `grid` | layout, tiles, dashboard |
| `list` | items, rows, menu |
| `plus` | add, new, increase |

## Choosing Icons by Use Case

| Use Case | Recommended Icons |
|----------|-------------------|
| Trust/security bar | shield, lock, check-circle, award |
| Shipping info | truck, box, refresh-cw, clock |
| Organic/natural brands | leaf, sun, heart, check-circle |
| Urgency/scarcity | zap, clock, bell, alert-circle |
| Social proof | star, heart, users, check-circle |
| Contact/support | phone, mail, message-circle |

## Example Configurations

### E-commerce Trust Bar
```json
[{"icon":"shield","label":"Secure Checkout"},{"icon":"truck","label":"Free Shipping over $50"},{"icon":"refresh-cw","label":"30-Day Returns"},{"icon":"award","label":"Premium Quality"}]
```

### Organic/Natural Brand
```json
[{"icon":"leaf","label":"100% Natural"},{"icon":"check-circle","label":"Dermat Tested"},{"icon":"heart","label":"Cruelty Free"},{"icon":"shield","label":"No Parabens"}]
```

### Supplements/Health
```json
[{"icon":"shield-check","label":"GMP Certified"},{"icon":"leaf","label":"Plant-Based"},{"icon":"award","label":"Lab Tested"},{"icon":"truck","label":"Same Day Dispatch"}]
```

## Rules

- Icon names are **case-sensitive** — use exactly as listed
- Only use icons from this catalog — custom icons are not supported
- No file extensions (use `shield` not `shield.svg`)

## MCP Resource

Access the full catalog programmatically:
```
vibe://catalog/icons
```

Returns JSON with all icons organized by category.

## Related

- [FAQ](/islands/content/faq) — Fixed disclosure-icon choices
- [IngredientExplorer](/islands/engagement/ingredient-explorer) — Optional ingredient icon content
- [MCP Resources](/resources) — Resource documentation