Icons in the design system are inline SVG. This provides the most flexibility for styling and prevents icons from loading slowly.
☝️ Research insight: During various testing sessions, such as for payments and dunning cycle, users noticed explanatory text more frequently when the content was highlighted by a hazard symbol. Use icons to bring attention to important text which users may otherwise miss.
Title allows you to insert invisible text for assistive software like screen readers. It's added as a title to the svg, has no effect on layout and is translatable by Google's translation service.
If the icon is purely decorative, it does not need to have a title.
<SvgIcon name="warning" title="Error" />
You can give the icon a specific fill color:
Avatar shows a thumbnail representation of a person in the interface.
Using space token
Using type token
Using a hardcoded size value