---
metaTitle: Icon component | AwesCode UI
meta:
  - name: description
    content: The <AwIcon /> component is used to render Icon - UI Vue component for AwesCode UI.
title: Icon
---

# Icon

**Category:** Atom | **Import:** Global

The `AwIcon` component renders SVG icons from the icon system, supporting custom icons, system icons, and animated icons.

## Overview

`AwIcon` is a functional component that renders icons from multiple sources:
- Custom SVG icons (via SVG sprite)
- System icons (mono and color variants)
- Animated icons

It automatically detects the icon type and renders the appropriate component.

## Usage

### Basic Example

```markup
<AwIcon name="star" />
```

### Custom Size

```markup
<AwIcon name="star" size="24" />
<AwIcon name="star" :size="32" />
```

### With Color

```markup
<AwIcon name="star" color="accent" />
```

### System Icons

```markup
<AwIcon name="awesio/arrow" />
<AwIcon name="awesiocolor/check" />
```

### Animated Icons

```markup
<AwIcon name="arrow-animated" />
```

### With Rotation

```markup
<AwIcon name="awesio/arrow::180" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| name | Icon name (required) - see [Built-in Icons](/reference/icons) | `String` | `true` | - |
| size | Icon size (pixels or number) | `String` / `Number` | `false` | `null` |
| color | Icon fill color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
| viewBox | Custom SVG viewBox | `String` | `false` | `null` |
| className | Additional CSS class | `String` | `false` | - |

### Slots

No slots are available for this component.

### Events

No events are emitted by this component.

## Icon Types

`AwIcon` automatically detects the icon type based on the `name` prop and renders the appropriate component internally. The detection follows this priority order:

1. **Animated Icons** - Checked first by exact name match
2. **System Icons** - Detected by prefix (`awesio/` or `awesiocolor/`)
3. **Custom Icons** - Fallback to SVG sprite system

### Custom Icons
Custom SVG icons loaded via SVG sprite system. These are icons you add to your project's SVG sprite:
```markup
<AwIcon name="custom-icon-name" />
```

**How it works:**
- Component renders `SvgIcon` which looks up the icon in the SVG sprite
- Icons are loaded from your project's sprite system
- Use for project-specific icons not in the built-in sets

### System Mono Icons
Built-in monochrome system icons from `@AwUtils/icons/mono`. Single-color SVG paths that inherit text color:
```markup
<AwIcon name="awesio/arrow" />
<AwIcon name="awesio/check" />
<AwIcon name="awesio/settings" />
```

**How it works:**
- Component detects `awesio/` prefix and renders `AwIconSystemMono`
- Icon name is extracted (e.g., `arrow` from `awesio/arrow`)
- Supports rotation using `::` syntax: `awesio/arrow::180`
- Icons inherit current text color via CSS
- All icons are 24x24 viewBox by default

**Available Mono Icons:**
`angle`, `angle-r`, `arrow`, `arrow-r`, `ban`, `check`, `check-circle`, `circle`, `close`, `close-circle`, `delete`, `download`, `drag`, `edit`, `empty-box`, `external`, `eye`, `eye-no`, `filter`, `file-csv`, `file-excel`, `file-image`, `file-pdf`, `file-word`, `image`, `info-circle`, `light`, `lock`, `mail`, `menu`, `menu-dots`, `more`, `more-v`, `phone`, `plus`, `plus-circle`, `plus-fill-square`, `profile`, `save`, `search`, `settings`, `triangle`, `undo`, `upload`, `user`, `warning`

### System Color Icons
Built-in multicolor system icons from `@AwUtils/icons/multicolor`. Icons with multiple colors for illustrations and decorative purposes:
```markup
<AwIcon name="awesiocolor/loader" />
<AwIcon name="awesiocolor/spinner" />
```

**How it works:**
- Component detects `awesiocolor/` prefix and renders `AwIconSystemColor`
- Icon name is extracted (e.g., `loader` from `awesiocolor/loader`)
- Icons have predefined dimensions and colors
- Best for loading states and animated indicators

**Available Color Icons:**
`loader`, `spinner`

**Note:** Color icons have predefined dimensions. Use `width` and `height` props on `AwIconSystemColor` to override if needed. Color icons are best for loading states and animated indicators.

### Animated Icons
Special animated icons from `@AwUtils/icons/animated`. Icons with CSS animations:
```markup
<AwIcon name="arrow-animated" />
```

**How it works:**
- Component checks for exact name match in animated icons first
- Renders inline SVG with animation classes
- Animations are defined via CSS classes in the icon content
- Use for loading states and interactive feedback

**Available Animated Icons:**
`arrow-animated`

## Related Components

- `AwIconSystemMono` - System mono icon component
- `AwIconSystemColor` - System color icon component
- `AwButton` - Button component that uses icons

## Icon Detection Logic

The component uses the following detection logic (in order):

1. **Animated Icons**: Checks if name exists in `ANIMATED_ICONS` object
   - If found: Renders inline SVG with animation classes
   - Example: `arrow-animated` → renders animated SVG

2. **System Icons**: Checks if name matches pattern `/^awesio(color)?\/.+/`
   - If `awesiocolor/` prefix: Renders `AwIconSystemColor` with extracted name
   - If `awesio/` prefix: Renders `AwIconSystemMono` with extracted name and optional rotation
   - Example: `awesio/arrow::180` → extracts `arrow` and `180` for rotation

3. **Custom Icons**: Falls back to `SvgIcon` component
   - Looks up icon in SVG sprite system
   - Example: `custom-icon` → searches sprite for matching icon

## Examples

### Mono Icons with Rotation
```markup
<AwIcon name="awesio/arrow" />
<AwIcon name="awesio/arrow::90" />
<AwIcon name="awesio/arrow::180" />
<AwIcon name="awesio/arrow::270" />
```

### Color Icons for Loading States
```markup
<div v-if="loading">
    <AwIcon name="awesiocolor/loader" />
    <p>Loading...</p>
</div>
```

### Animated Loading States
```markup
<AwIcon name="arrow-animated" size="32" />
```

### Different Icon Types Together
```markup
<div class="flex gap-4">
    <!-- Mono icon -->
    <AwIcon name="awesio/check" color="success" />
    
    <!-- Color icon -->
    <AwIcon name="awesiocolor/loader" />
    
    <!-- Animated icon -->
    <AwIcon name="arrow-animated" />
    
    <!-- Custom icon -->
    <AwIcon name="custom-logo" />
</div>
```

## Viewing All Available Icons

To see all available built-in icons, visit the Icons page in the example project at `/icons`. The page displays:
- All mono icons with `awesio/` prefix
- All color icons with `awesiocolor/` prefix  
- All animated icons
- Search functionality to find icons by name

## Notes

- **Import Method:** Global - Available as atom component
- Functional component for optimal performance
- Automatically detects icon type from name pattern
- Size defaults to text size (1em) if not specified
- Supports rotation for mono system icons using `::` syntax (e.g., `awesio/arrow::180`)
- Animated icons are automatically detected and rendered with CSS animations
- Color prop sets fill color via CSS custom properties (works with mono icons)
- Mono icons inherit text color when color prop is not provided
- Color icons have fixed colors defined in the icon data