# EuiIconStateComponent

**Type:** component



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.

### Success state icon
```html
<eui-icon-state
  euiSuccess
  size="m"
  ariaLabel="Success">
</eui-icon-state>
```

### Warning indicator
```html
<eui-icon-state
  euiWarning
  size="l"
  ariaLabel="Warning: Action required">
</eui-icon-state>
```

### Accessibility
- Always provide descriptive `ariaLabel` for meaningful icons
- Color is not the only indicator (icon shape also conveys meaning)
- Sufficient contrast maintained in all state variants

### Notes
- State variants: euiPrimary, euiSuccess, euiInfo, euiWarning, euiDanger
- Icon automatically matches the state color
- Use in feedback messages, form validation, and status displays
- Combine with text labels for clarity


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

## Inputs
- **ariaLabel**: `string` - Accessible label for screen readers describing the icon's purpose or meaning. Required for accessibility when the icon conveys semantic information.
- **size**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` - Controls the rendered size of the icon.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]