Icon displays from a set of simple, square icons. Element includes a limited set which can be edited and expanded.
- As ornament to add to written content
- Always include text with icons. Use VisuallyHidden if necessary.
- Icons should be paired with text, do not assume that the icon alone will be understood by everyone. On web it is recommended to use ems for icon sizes, so they should match the size of the text automatically (and responsively!). For responsive sizing on native the size should be set manually.
- Never use an icon instead of text
- Icons cannot be “read” by screen readers so they should be paired them with text and considered as purely decorative.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Icons will generally inherit the colour and size of their parent, but these can also be set manually.
Custom colour
Customising icons
All custom icons should be on a square canvas and use "currentColor" as the default fill color. Props should be spread on the "svg" element.
You can override existing icons or add new icons by adding the IconProvider around your app:
Providing text alternatives
This component must always be used alongside text. To help you provide suitable text alongside the icons, we've provided some suggestions to help you determine the sort of information that may be useful for people.
The accompanying text will always depend on the context of use, so these suggestions may not always be appropriate. You can think about the information the icon is conveying, or the text that you would use if the icon wasn't visible, to help you write a suitable alternative for people who may be unable to see the icons.
VisullyHidden text may be needed for cases when accompanying text does not fully describe the icon. For example, if the download icon is paired with a file name the icon should be supplemental text of "Download" to provide an equivalent experience for people who cannot see the icon.
|
Icon name |
Suggested accompanying text/alternative |
|---|---|
|
name="arrow-down" |
"View more", "Next" |
|
name="arrow-left" |
"Previous", "Back" |
|
name="arrow-right" |
"Next step", "Next page" |
|
name="arrow-up" |
"View less", "Back to top" |
|
name="caret-arrow-down" |
"Expand", "Decrease" |
|
name="caret-arrow-left" |
"Decrease" |
|
name="caret-arrow-right" |
"Increase" |
|
name="caret-arrow-up" |
"Collapse", "Increase" |
|
name="chart" |
"Statistics", "Your usage data" |
|
name="check" |
"Completed", "Confirmed" |
|
name="chevron-left" |
"Previous month", "Previous page" |
|
name="chevron-left-small" |
"Back", "Previous slide" |
|
name="chevron-left-small-first" |
"Back to start", "Back to first slide" |
|
name="chevron-right" |
"Next month", "Next page" |
|
name="chevron-right-small" |
"Next", "Next slide" |
|
name="chevron-right-small-last" |
"Jump to last", "Go to last slide" |
|
name="chevron-up" |
"Increase priority", "Expand" |
|
name="chevron-down" |
"Decrease priority", "Collapse" |
|
name="cross" |
"Close", "Cancel" |
|
name="dollar" |
"Currency", "Dollars", "Bill amount", "Total" |
|
name="download" |
"Download", "Save" |
|
name="electricity" |
"Energy", "Electricity" |
|
name="euro" |
"Currency", "Euros", "Bill amount", "Total" |
|
name="gas" |
"Energy", "Gas" |
|
name="help" |
"Help", "What does this mean?" |
|
name="hide" |
"Hide", "Hide password" |
|
name="home" |
"Home", "Your house" |
|
name="info" |
"More information" |
|
name="new-window" |
"Opens in new window" |
|
name="link" |
|
|
name="logo" |
"OVO" |
|
name="minus" |
"Remove", "Decrease", "Collapse" |
|
name="payment-card" |
"Payment", "Paying your bill", "Payment methods", "Direct debit information" |
|
name="plus" |
"Add", "Increase", "Expand" |
|
name="pound" |
"Currency", "Pounds", "Bill amount", "Total" |
|
name="search" |
"Search", "Search my statements" |
|
name="show" |
"Show", "Show password" |
|
name="user" |
"Your account", "Your details" |
|
name="circle" |
"Updated" |
|
name="tune" |
"Settings", "Update your information" |
Properties
|
Name |
Values |
Default |
|---|---|---|
|
name |
IconName |
|
|
size |
number | string |
1em |
|
color Native only |
string |
|
|
... |
JSX.IntrinsicElements["svg"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone with a cognitive disability, I want to be able to quickly understand the information present visually without having to read the text.
Test steps
Use these steps to check that the Icon component has been implemented correctly:
- Turn on a screen reader.
- Verify that when reading content with an icon included, that the icon has either been used alongside text, or a text alternative is announced for the icon.
Avoiding accessibility barriers
We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:
- When choosing a colour for the icons, ensure that there is at least a 3:1 colour contrast ratio between the colour of the icons and the page/container background.