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.
When using custom SVGs please remove all fill attributes on the SVG and utilize the CSS helpers if you have complex logos that need to work with theming.
Glyphs
Glyphs are small, monochromatic icons that typically should always use the default size of size="m". They tend to be pixel perfect and don't scale very well into larger sizes.
Editor controls
Editor icons relate to the visual styling of elements and are commonly used within EuiButtonGroup components.
Apps
App logos are usually displayed at 32x32 or above and can contain multiple colors.
Tokens
Tokens are most commonly used in search to help visually classify results. The tokens included in EUI can be used to identify a number of code-based search results.
An EuiToken accepts any valid EuiIcon as itsiconType property. However, icons designed specifically for use in the EuiToken are prefixed with "token" in their name.
Multiple variants are available including: shape, size,color, hideBorder, and fill.
By default the iconType prop defines the styling of the token. However, displayOptions allows you to overwrite the color, shape and fill used if you need a more custom token using any of the EUI glyph set.
A custom token
A custom token
A custom token
Machine learning icons
ML has some specific icons for job creation. Again, these are made for 32x32.
Elastic logos
Product logos follow similar rules as app logos. Note the use of .euiIcon__fillNegative on portions of the SVGs to handle flipping colors for dark mode.
Third party logos
Sizes
Use the size prop to automatically size your icons. Medium is the default, and will output a 16x16 icon.
s
m
l
xl
xxl
original
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).
default
primary
secondary
accent
warning
danger
text
subdued
ghost
#490
#F98510
#DDDDDD
Default coloring of App icons is two-toned
Special: the text color makes App icons fully that color
Special: the primary color makes App icons fully that color
Accessibility
You can title the SVG by passing the aria-label prop to EuiIcon. No value is set by default.
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, 32x32...etc). For IE11 compatibility, the SVG file must contain a viewBox.
logoElastic
http://some.svg
{reactSvg}
Any component that utlizes EuiIcon can use custom SVGs as well