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.

Large heading with an icon

Smaller heading with the same icon

<H3 size="xx-large">
  Large heading with an icon{' '}
  <Icon icon={BankIcon} title="Beach" size="auto" />
</H3>
<H4>
  Smaller heading 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