---
metaTitle: Built-in Icons | AwesCode UI
meta:
  - name: description
    content: Complete list of built-in icons available in AwesCode UI components.
title: Built-in Icons
---

# Built-in Icons

AwesCode UI includes a comprehensive set of mono icons available for use in components like `AwIcon`, `AwButton`, and other components with icon support.

## Icon Naming

All built-in icons use the `awesio/` prefix followed by the icon name. For example:
- `awesio/check`
- `awesio/settings`
- `awesio/user`

## Available Icons

### Navigation & UI

| Icon Name | Description |
|-----------|-------------|
| `awesio/angle` | Angle/chevron arrow |
| `awesio/arrow` | Standard arrow |
| `awesio/back` | Back navigation |
| `awesio/close` | Close/dismiss icon |
| `awesio/close-circle` | Close icon in circle |
| `awesio/exit` | Exit/logout icon |
| `awesio/external` | External link indicator |
| `awesio/menu` | Hamburger menu |
| `awesio/menu-dots` | Three dots menu |
| `awesio/more` | More options (horizontal) |
| `awesio/more-v` | More options (vertical) |

### Actions & Controls

| Icon Name | Description |
|-----------|-------------|
| `awesio/check` | Checkmark |
| `awesio/check-circle` | Checkmark in circle |
| `awesio/circle` | Circle outline |
| `awesio/delete` | Delete/trash icon |
| `awesio/download` | Download arrow |
| `awesio/drag` | Drag handle |
| `awesio/edit` | Edit/pencil icon |
| `awesio/minus` | Minus sign |
| `awesio/plus` | Plus sign |
| `awesio/plus-circle` | Plus in circle |
| `awesio/plus-fill-square` | Plus in filled square |
| `awesio/save` | Save/floppy disk |
| `awesio/search` | Search/magnifying glass |
| `awesio/undo` | Undo action |
| `awesio/upload` | Upload arrow |

### Status & Info

| Icon Name | Description |
|-----------|-------------|
| `awesio/ban` | Ban/prohibited sign |
| `awesio/bell` | Notification bell |
| `awesio/info-circle` | Information in circle |
| `awesio/question-circle` | Question mark in circle |
| `awesio/spinner` | Loading spinner |
| `awesio/triangle` | Triangle warning |
| `awesio/warning` | Warning/alert icon |

### Content & Files

| Icon Name | Description |
|-----------|-------------|
| `awesio/box` | Box/package |
| `awesio/empty-box` | Empty box |
| `awesio/copy` | Copy/document icon |
| `awesio/file-csv` | CSV file |
| `awesio/file-excel` | Excel file |
| `awesio/file-image` | Image file |
| `awesio/file-pdf` | PDF file |
| `awesio/file-word` | Word document |
| `awesio/image` | Image/picture icon |

### User & Social

| Icon Name | Description |
|-----------|-------------|
| `awesio/gift` | Gift/present |
| `awesio/heart` | Heart outline |
| `awesio/heart-fill` | Filled heart |
| `awesio/mail` | Email/envelope |
| `awesio/phone` | Phone/call icon |
| `awesio/star` | Star outline |
| `awesio/star-fill` | Filled star |
| `awesio/user` | User/person icon |

### Location & Maps

| Icon Name | Description |
|-----------|-------------|
| `awesio/home` | Home icon |
| `awesio/location` | Location/map marker |
| `awesio/pin` | Pin/thumbtack |
| `awesio/pin-no` | Unpin icon |

### Security & Privacy

| Icon Name | Description |
|-----------|-------------|
| `awesio/eye` | Visible/show |
| `awesio/eye-no` | Hidden/hide |
| `awesio/lock` | Lock/secured |
| `awesio/lock-fill` | Filled lock |
| `awesio/unlock` | Unlock/unsecured |

### Tools & Settings

| Icon Name | Description |
|-----------|-------------|
| `awesio/chart` | Chart/analytics |
| `awesio/filter` | Filter funnel |
| `awesio/light` | Light bulb/idea |
| `awesio/link` | Link/chain icon |
| `awesio/magic` | Magic wand |
| `awesio/settings` | Settings/gear icon |
| `awesio/tag` | Tag outline |
| `awesio/tag-fill` | Filled tag |

## Usage Examples

### In AwIcon Component

```markup
<AwIcon name="awesio/check" />
<AwIcon name="awesio/settings" size="24" />
```

### In AwButton Component

```markup
<AwButton icon="awesio/plus" text="Add Item" />
<AwButton icon="awesio/download">Download</AwButton>
```

### In Custom Components

```markup
<AwList :items="items">
    <template #item="{ item }">
        <AwFlow :gap="2" align-items="center">
            <AwIcon :name="item.icon" size="16" />
            <span>{{ item.title }}</span>
        </AwFlow>
    </template>
</AwList>
```

## Notes

- All icons are mono (single-color) and inherit the current text color
- Icon size can be customized using the `size` prop in components that support it
- Icons are SVG-based for crisp rendering at any size
- The `awesio/` prefix is required when using built-in icons