Icons
EuiIcon is a handy component for using our custom glyphs and logos. The type prop accepts either an enumerated name from one of the sets below, a location to a custom SVG asset, or a React Element.
Component
Accessibility recommendation
If possible, provide a descriptive title based on the icon use. If no title is provided, the icon is considered purely decorative, and it will default to aria-hidden=true.
Usage
Sizes
Use the size prop to automatically size your icons. Medium is the default, and will output a 16x16 icon.
Colors
The default behavior of icons is to inherit from the text color. You can use the color prop to assign a custom color which accepts a named color from our palette or a validΒ CSS color data typeΒ which will be passed down through the inline-style fillΒ property. We recommend relying on the EUI named color palette unless the custom color is initiated by the user (like as a graph color).
Two-tone icons, like our app style icons, will behave similarly to normal glyphs when provided a specific color by applying the color to all the shapes within. You can force the icon to match the parent's text color by passing color="inherit" to the icon.
Glyphs
Glyphs are small, monochromatic icons that typically should always use the default size of size="m". They are named according to their appearance or the action they represent. For example, star, play, etc.
If you would like to contribute to our growing list of glyphs, you can follow these guidelines.
Editor controls
Editor icons relate to the visual styling of elements and are commonly used within EuiButtonGroup components.
Elastic logos
These logos are restricted in use to Elastic products or when referencing Elastic products. They are multi-color with some internal paths having a class of .euiIcon__fillNegative to handle flipping colors for dark mode. The only other colors most of them support are ghost and text which turn them into a solid shape.
Apps
App logos are logos for Elastic Apps, and can contain multiple colors. Normally the Elastic Design team creates those icons. They are not meant to be used outside of Elastic, because they represent our apps. App logos are usually displayed at 32x32 or above and can contain multiple colors.
Our set of App Icons are a subset of what the Elastic Design team provides. If you require an icon from that set which EUI does not currently provide, please open a Feature Request for the EUI team to add it.
Machine learning icons
Machine learning has some specific icons for job creation. Again, these are made for 32x32.
Tokens
Tokens are most commonly used to visually signify field or code types. An EuiToken accepts any valid EuiIcon as its iconType property. However, icons designed specifically for use in the EuiToken are prefixed with "token" in their name and have pre-defined styles.
Custom tokens
By default, an iconType with the token prefix (i.e. those listed above) will have predefined styles. However, any valid iconType can be passed and, in either case, the shape, size, color, and fill can be customized.
tsx code block:<EuiToken iconType="tokenStruct" size="xs" color="gray" />
tsx code block:<EuiToken iconType="tokenStruct" fill="none" />
tsx code block:<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#b9f6c8" />
tsx code block:<EuiToken iconType="faceHappy" />
tsx code block:<EuiToken iconType="faceHappy" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />
Custom SVGs
The type prop can accept a valid enum, string or React SVG Element. When using a custom SVG, please make sure it sits on a square canvas and preferably utilizes one of EUI's sizes (16x16 or 32x32).
When using custom SVGs for simple glyphs, remove all fill attributes on the SVG and utilize the CSS helpers if you have complex logos that need to work with theming.
Important considerations when importing SVGs as components
When importing an SVG as a component like import { ReactComponent as ReactLogo } from './logo.svg';, keep in mind that the component will not support the title prop. The title prop is designed to only work with our icons or SVGs imported as images or passed as a Data URL. So, if you're importing your SVG as a component, be sure to use anaria-label instead of a title prop to enhance accessibility and avoid potential issues.
Using icons as background images
EUI only lets you use icons by referring to their names in components (like <EuiIcon type="grid" />). The actual icon files arenβt exported, so you canβt use them directly in CSS as background images.
Props
EuiIcon
Prop | Description and type | Default value |
|---|---|---|
Prop type# | Description and type
IconType | Default value Required |
Prop size# | Description and type Note that every size other than "s" | "m" | "l" | "xl" | "xxl" | "original" | Default value |
Prop title# | Description and type Descriptive title for naming the icon based on its use string | Default value |
Prop className# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop color# | Description and type One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop titleId# | Description and type A unique identifier for the title element string | Default value |
Prop onIconLoad# | Description and type Callback when the icon has been loaded & rendered () => void | Default value |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<unknown> | Default value |