---
metaTitle: IconSystemColor component | AwesCode UI
meta:
  - name: description
    content: The <AwIconSystemColor /> component renders multicolor system icons - UI Vue component for AwesCode UI.
title: IconSystemColor
---

# AwIconSystemColor

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

The `AwIconSystemColor` component renders multicolor system icons from the AwesCode UI icon library. These icons contain multiple colors and are typically used for illustrations and decorative purposes.

## Overview

`AwIconSystemColor` provides multicolor icon rendering with:
- Predefined multicolor SVG icons
- Automatic sizing based on icon dimensions
- Custom width/height support
- Inline SVG rendering for styling control

## Usage

### Basic Example

```markup
<AwIconSystemColor name="success" />
```

### With Custom Size

```markup
<AwIconSystemColor
  name="error"
  width="48"
  height="48"
/>
```

### In Error States

```markup
<div class="text-center">
  <AwIconSystemColor name="404" width="200" height="200" />
  <h2>Page Not Found</h2>
</div>
```

### In Success Messages

```markup
<AwCard>
  <AwIconSystemColor name="check-circle" width="64" height="64" />
  <p>Operation completed successfully!</p>
</AwCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| name | Icon name from multicolor icon set | `String` | `true` | - |
| width | Icon width (overrides default) | `String\|Number` | `false` | Icon's default width |
| height | Icon height (overrides default) | `String\|Number` | `false` | Icon's default height |

### Slots

This component does not have slots.

### Events

This component does not emit events.

## Available Icons

The component uses icons from `@AwUtils/icons/multicolor`. Common icons include:
- Error/warning illustrations
- Success/completion graphics
- 404/403 error pages
- Feature illustrations
- Status indicators

## Differences from AwIcon

| Feature | AwIconSystemColor | AwIcon |
|---------|-------------------|--------|
| Colors | Multicolor (preserved from design) | Monochrome (inherits text color) |
| Use Case | Illustrations, decorative | UI elements, buttons |
| Size Control | Width/height props | Size prop or CSS |
| Icon Set | Multicolor system icons | Font-based or mono icons |

## Styling

The component renders inline SVG, allowing CSS styling:

```markup
<AwIconSystemColor
  name="success"
  class="mx-auto"
  style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
/>
```

## Related Components

- `AwIconSystemMono` - Monochrome system icons
- `AwIcon` - General-purpose icon component

## Notes

- **Import Method:** Global - Available as atom component
- **Preferred Usage:** Use `<AwIcon name="awesiocolor/icon-name" />` instead of using this component directly. The AwIcon component automatically detects the icon type and provides a simpler API.
- Icons maintain their original colors from design
- Inline SVG allows for advanced CSS styling
- Icon viewBox and content come from icon library
- If icon name doesn't exist, component renders empty
- Default size comes from icon definition
- Use for illustrations and large decorative graphics
- Not suitable for small UI icons (use AwIconSystemMono instead)