---
metaTitle: IconSystemMono component | AwesCode UI
meta:
  - name: description
    content: The <AwIconSystemMono /> component renders monochrome system icons with rotation support - UI Vue component for AwesCode UI.
title: IconSystemMono
---

# AwIconSystemMono

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

The `AwIconSystemMono` component renders monochrome system icons from the AwesCode UI icon library. These icons are single-color SVG paths that inherit the current text color and support rotation.

## Overview

`AwIconSystemMono` provides monochrome icon rendering with:
- Monochrome SVG icons (inherits text color)
- Rotation support
- Custom sizing
- Functional component (optimized performance)
- Automatic size-text class for font-size inheritance

## Usage

### Basic Example

```markup
<AwIconSystemMono name="arrow" />
```

### With Custom Size

```markup
<AwIconSystemMono
  name="close"
  size="24"
/>
```

### With Rotation

```markup
<AwIconSystemMono
  name="angle"
  :rotate="90"
/>

<AwIconSystemMono
  name="arrow"
  :rotate="-90"
/>
```

### Inheriting Font Size

```markup
<p class="text-2xl">
  <AwIconSystemMono name="info" /> Information
</p>
```

### In Buttons

```markup
<AwButton>
  <template #icon>
    <AwIconSystemMono name="plus" />
  </template>
  Add Item
</AwButton>
```

### Rotated Arrows

```markup
<!-- Arrow pointing up -->
<AwIconSystemMono name="arrow" :rotate="0" />

<!-- Arrow pointing right -->
<AwIconSystemMono name="arrow" :rotate="-90" />

<!-- Arrow pointing down -->
<AwIconSystemMono name="arrow" :rotate="180" />

<!-- Arrow pointing left -->
<AwIconSystemMono name="arrow" :rotate="90" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| name | Icon name from mono icon set | `String` | `true` | - |
| size | Icon size in pixels | `String\|Number` | `false` | `null` |
| rotate | Rotation angle in degrees | `String\|Number` | `false` | `null` |

### Slots

This component does not have slots (functional component).

### Events

This component does not emit events (functional component).

## Available Icons

Common mono system icons include:
- `arrow` - Arrow icon (rotatable)
- `angle` - Angle/chevron icon (rotatable)
- `close` - Close/X icon
- `check` - Checkmark icon
- `plus` - Plus/add icon
- `minus` - Minus/subtract icon
- `info` - Information icon
- `warning` - Warning icon
- `menu` - Hamburger menu icon
- And many more...

## Rotation

Rotation is applied around the center point of the icon:

```markup
<!-- Dropdown caret (down) -->
<AwIconSystemMono name="angle" :rotate="-90" />

<!-- Dropdown caret (up) -->
<AwIconSystemMono name="angle" :rotate="-270" />

<!-- Sidebar arrow (collapsed) -->
<AwIconSystemMono name="arrow" :rotate="-90" />

<!-- Sidebar arrow (expanded) -->
<AwIconSystemMono name="arrow" :rotate="0" />
```

## Sizing Behavior

### Without size prop
Icon inherits font-size from parent (adds `aw-icon--size-text` class):
```markup
<div class="text-lg">
  <AwIconSystemMono name="check" /> <!-- Icon is 1.125rem (18px) -->
</div>
```

### With size prop
Icon uses explicit size:
```markup
<AwIconSystemMono name="check" size="32" /> <!-- Icon is 32x32px -->
```

## Color Inheritance

Icons inherit the current text color:

```markup
<span class="text-red-500">
  <AwIconSystemMono name="warning" />
</span>

<span class="text-green-500">
  <AwIconSystemMono name="check" />
</span>
```

## Accessibility

The component automatically includes `aria-hidden="true"` since icons are decorative. For semantic icons, provide alternative text:

```markup
<button>
  <AwIconSystemMono name="close" />
  <span class="sr-only">Close</span>
</button>
```

## Performance

`AwIconSystemMono` is a functional component, making it highly performant:
- No instance overhead
- Direct render function
- Optimized for repeated use

## Related Components

- `AwIconSystemColor` - Multicolor system icons
- `AwIcon` - General-purpose icon component

## Notes

- **Import Method:** Global - Available as atom component
- **Preferred Usage:** Use `<AwIcon name="awesio/icon-name" />` instead of using this component directly. The AwIcon component automatically detects the icon type and provides a simpler API.
- Functional component for optimal performance
- Icons inherit current text color
- SVG paths defined in `@AwUtils/icons/mono`
- Rotation uses SVG transform around center
- If size/width/height not provided, adds `aw-icon--size-text` class
- Supports multiple paths per icon (array of path data)
- Falls back to rendering icon name as text if icon not found
- viewBox is standardized across all mono icons
- clip-rule and fill-rule set to "evenodd"
- Always includes xmlns for SVG spec compliance