Icon

Live example

Implementation

Customising icons

All custom icons should be on a square canvas and use currentColor as the default fill colour. 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.

VisuallyHidden 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	Icon name	Suggested accompanying text/alternative
	name="address"
	name="advice"
	name="archive"
	name="award"
	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="battery"
	name="cal"
	name="cal-book"
	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="chart-filled"
	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="check-circle"
	name="close-circle"
	name="cross"	"Close", "Cancel"
	name="doc"
	name="dollar"	"Currency", "Dollars", "Bill amount", "Total"
	name="download"	"Download", "Save"
	name="eco"
	name="eco-home"
	name="edit"
	name="electric-car"
	name="electric-home"
	name="electricity"	"Energy", "Electricity"
	name="equals"
	name="euro"	"Currency", "Euros", "Bill amount", "Total"
	name="gas"	"Energy", "Gas"
	name="globe-address"
	name="help"	"Help", "What does this mean?"
	name="help-filled"
	name="hide"	"Hide", "Hide password"
	name="home"	"Home", "Your house"
	name="home-filled"
	name="hydro-power"
	name="info"	"More information"
	name="mail"
	name="mail-open"
	name="message"
	name="message-filled"
	name="menu"
	name="mobile"
	name="new-window"	"Opens in new window"
	name="link"	OVO Energy, Home energy tariffs
	name="logo"	"OVO"
	name="minus"	"Remove", "Decrease", "Collapse"
	name="payment-card"	"Payment", "Paying your bill", "Payment methods", "Direct debit information"
	name="payment-card-filled"
	name="phone"
	name="plus"	"Add", "Increase", "Expand"
	name="pound"	"Currency", "Pounds", "Bill amount", "Total"
	name="pricing"
	name="pricing-filled"
	name="security"
	name="search"	"Search", "Search my statements"
	name="show"	"Show", "Show password"
	name="solar"
	name="star"
	name="star-filled"
	name="smart-home"
	name="smart-meter"
	name="sun"
	name="trees"
	name="user"	"Your account", "Your details"
	name="user-filled"
	name="circle"	"Updated"
	name="torch"
	name="tune"	"Settings", "Update your information"
	name="wallet"
	name="warning"
	name="warm-home"
	name="web-address"
	name="wind-power"