Accessibility of Icons#

By using inline SVG, we have the possibility to make graphical assets both responsive and interactive. In order to do so, use the Icon component. These components provide the needed runtime processing.

Decorative Icons#

The Icon component uses role="decoration" by default, which makes it invisible to assistive technologies.

<Icon icon={BankIcon} size="24" title="Beach" />

Responsive Icons#

Use size="auto" to force the icon to inherit the size of its parent element.

My H1 with an icon

My H4 with the same icon

<H1>
  My H1 with an icon <Icon icon={BankIcon} title="Beach" size="auto" />
</H1>
<H4>
  My H4 with the same icon{' '}
  <Icon icon={BankIcon} title="Beach" size="auto" />
</H4>

SVG Icons#

Scalable Vector Graphics can be set up to be scalable and actually respond to the font-size.

- has a fixed size

- is responsive

const Responsive = styled.span`
  svg {
    font-size: inherit;
    width: 1.5em;
    height: 1.5em;
  }
`
const Svg = (props) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M4.03 5.22a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-1.06-1.06L8 9.19 4.03 5.22z"
      fill="currentColor"
    />
  </svg>
)
render(
  <>
    <p>
      <Svg width="24" height="24" /> - has a fixed size
    </p>
    <p>
      <Responsive>
        <Svg />
      </Responsive>{' '}
      - is responsive
    </p>
  </>
)

Suggest an edit