---
name: Iconography
menu: Patterns
parent: Styles
route: /styles/iconography
---

# Iconography

We currently have mix of icon font icons and SVG icons in use. We are gradually transitioning to the latter.

## SVG icons

```specimen-react
// added by docz
delete iconsList.__filemeta
const iconNames = Object.keys(iconsList);
const iconRows: Array<string[]> = [];

while (iconNames.length > 0) {
  iconRows.push(iconNames.splice(0, 3));
};

<div>
  {iconRows
    .map((iconRow, index) => (
      <DocRow key={index}>
        {iconRow.map(iconName => (
          <div key={iconName}>
            <SvgIcon name={iconName} />
            <Vspace spacing="earth">
              <span>{iconName}</span>
            </Vspace>
          </div>
        ))}
      </DocRow>
    ))
  }
</div>
```

```specimen-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`

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.

```tsx
<SvgIcon name="warning" title="Error" />
```

## `color`

You can give the icon a specific fill color:

```specimen-react
<SvgIcon name="warning" color={palette.ui.red} />
```

## Avatar

Avatar shows a thumbnail representation of a person in the interface.

```specimen-react
<Avatar
  src="https://i.imgur.com/X9ct19r.jpg"
/>
```
