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

# Action Icon

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

The `AwActionIcon` component displays an icon with optional text, with customizable size, color, and styling.

## Overview

`AwActionIcon` provides a flexible icon display component that can show an icon, image, or custom content. It supports multiple sizes, colors, and can display text alongside the icon.

## Usage

### Different Sizes

```markup
<AwActionIcon icon="awesio/check" size="xxs" />
<AwActionIcon icon="awesio/check" size="xs" />
<AwActionIcon icon="awesio/check" size="sm" />
<AwActionIcon icon="awesio/check" size="md" />
<AwActionIcon icon="awesio/check" size="lg" />
```

### Different Colors

```markup
<AwActionIcon icon="awesio/star" color="accent" />
<AwActionIcon icon="awesio/star" color="success" />
<AwActionIcon icon="awesio/star" color="warning" />
<AwActionIcon icon="awesio/star" color="error" />
<AwActionIcon icon="awesio/star" color="info" />
```

### With Text

```markup
<AwActionIcon icon="awesio/download" text="Download" size="sm" />
<AwActionIcon icon="awesio/upload" text="Upload" size="md" />
<AwActionIcon icon="awesio/mail" text="Send" size="lg" />
```

### Custom Icon Color

```markup
<AwActionIcon
    icon="awesio/heart"
    color="mono-100"
    icon-color="error"
/>
```

### Outline Style

```markup
<AwActionIcon
    icon="awesio/check"
    color="success"
    modifiers="outline"
/>
```

### With Image

```markup
<AwActionIcon
    :image="{ src: 'url', alt: 'Alt text' }"
    size="md"
/>
```

### Custom Size (px)

You can provide a numeric value for the `size` prop to set a custom size in pixels.

```markup
<AwActionIcon icon="awesio/settings" :size="30" />
<AwActionIcon icon="awesio/settings" :size="50" />
<AwActionIcon icon="awesio/settings" :size="70" />
```

## API

### Props

| Name | Description | Type | Required | Default | Validator |
|------|-------------|------|----------|---------|-----------|
| image | Image object with src and alt | `Object` | `false` | `null` | - |
| icon | Icon name | `String` | `false` | `'arrow-animated'` | - |
| text | Text to display alongside icon | `String` | `false` | `''` | - |
| size | Icon size preset or custom pixels | `String` / `Number` | `false` | `'md'` | Must be one of: xxs, xs, sm, md, lg or any `Number` |
| color | Background color | `String` | `false` | `'mono-700'` | - |
| onColor | Text/icon color | `String` | `false` | `''` | - |
| iconColor | Custom icon color | `String` | `false` | `''` | - |
| modifiers | CSS modifiers (e.g., 'outline') | `String` / `Array` | `false` | `''` | - |
| desktopFrom | Breakpoint for desktop sizing | `String` | `false` | `'lg'` | - |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom content (replaces icon) | - | Icon with optional text |

### Events

No events are emitted by this component.

## Related Components

- `AwIcon` - Basic icon component
- `AwActionCard` - Card component that may use action icons

## Notes

- **Import Method:** Global - Available as atom component
- Supports animated icons (automatically detected)
- Size adapts on mobile devices when `desktopFrom` breakpoint is not met
- When `image` prop is provided, icon and text are not displayed
- Text is only shown when size supports it (sm, md, lg)