# EuiIconStateComponent

**Type:** component

<p>Displays an icon with semantic state styling (primary, success, info, warning, danger).
Combines icon rendering with state-based color variants for status indicators, alerts, and contextual UI elements.
Inherits state inputs from BaseStatesDirective for consistent theming across the application.</p>
<h3>Success state icon</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-state
  euiSuccess
  size=&quot;m&quot;
  ariaLabel=&quot;Success&quot;&gt;
&lt;/eui-icon-state&gt;</code></pre></div><h3>Warning indicator</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-state
  euiWarning
  size=&quot;l&quot;
  ariaLabel=&quot;Warning: Action required&quot;&gt;
&lt;/eui-icon-state&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Always provide descriptive <code>ariaLabel</code> for meaningful icons</li>
<li>Color is not the only indicator (icon shape also conveys meaning)</li>
<li>Sufficient contrast maintained in all state variants</li>
</ul>
<h3>Notes</h3>
<ul>
<li>State variants: euiPrimary, euiSuccess, euiInfo, euiWarning, euiDanger</li>
<li>Icon automatically matches the state color</li>
<li>Use in feedback messages, form validation, and status displays</li>
<li>Combine with text labels for clarity</li>
</ul>


**Selector:** `eui-icon-state`

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Accessible label for screen readers describing the icon&#39;s purpose or meaning.
Required for accessibility when the icon conveys semantic information.</p>

- **size**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` - <p>Controls the rendered size of the icon.</p>

