# EclIconComponent

**Type:** component



ECL icon component – renders SVG icons from various sets depending on current theme.
Integrates with ECL theming and supports accessibility options.


**Selector:** `ecl-icon`

## Inputs
- **ariaHidden**: `boolean` - Determines whether the icon should be hidden from assistive technologies. Defaults to `true` unless a title is provided.
- **ariaLabelledby**: `string` - ID reference for an external element that labels this icon for screen readers.
- **focusable**: `boolean` - Controls whether the icon is focusable via keyboard. Defaults to `false`.
- **icon**: `string` - Name of the icon to render from the selected set.
- **iconSet**: `"default" | "social" | "social-media" | "flag" | string` - Defines the icon set to use. Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix. Defaults to `'default'`.
- **isFlipHorizontal**: `boolean` - Flips the icon horizontally if set to `true`.
- **role**: `string` - ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.
- **title**: `string` - Title used for accessibility. Also affects `aria-hidden` and `role`.
- **color**: `'inverted' | 'primary' | null` - Applies color styling to the icon. Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.
- **size**: `'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string` - Size of the icon. Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`. Defaults to `'xs'`.
- **transform**: `string` - Adds a transformation modifier to the icon (e.g., rotation).
