# EuiIconColorComponent

**Type:** component

<p>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.</p>
<h3>Basic colored icon</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-colored iconClass=&quot;icon-brand-logo&quot;&gt;&lt;/eui-icon-colored&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Ensure sufficient color contrast for all icon paths</li>
<li>Provide alternative text or labels when icon conveys meaning</li>
<li>Consider monochrome fallback for accessibility modes</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Icon classes must be defined in your icon font or CSS</li>
<li>Each path element receives a <code>.path{n}</code> class for individual styling</li>
<li>Best suited for brand logos and multi-color illustrations</li>
<li>For simple icons, use eui-icon-svg instead</li>
</ul>


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

**Standalone:** false

## Inputs

- **iconClass**: `any` - <p>CSS class name corresponding to the colored icon to display. Must match an icon class from the eUI colored icon set.</p>

