# EuiIconColorComponent

**Type:** component



Renders multi-colored icons using layered path elements with individual color styling.
Supports icons with up to 20 distinct color paths, commonly used for brand logos and complex iconography.

### Basic colored icon
```html
<eui-icon-colored iconClass="icon-brand-logo"></eui-icon-colored>
```

### Accessibility
- Ensure sufficient color contrast for all icon paths
- Provide alternative text or labels when icon conveys meaning
- Consider monochrome fallback for accessibility modes

### Notes
- Icon classes must be defined in your icon font or CSS
- Each path element receives a `.path{n}` class for individual styling
- Best suited for brand logos and multi-color illustrations
- For simple icons, use eui-icon-svg instead


**Selector:** `eui-icon-colored, span[euiIconColored], [euiIconColored]`

## Inputs
- **iconClass**: `any` - CSS class name corresponding to the colored icon to display. Must match an icon class from the eUI colored icon set.