Skip to content
Home

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.

Code Editor
<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

Code Editor
<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

Code Editor
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="#000"
    />
  </svg>
)
render(
  <>
    <p>
      <Svg width="24" height="24" /> - has a fixed size
    </p>
    <p>
      <Responsive>
        <Svg />
      </Responsive>{' '}
      - is responsive
    </p>
  </>,
)