Components

Icons

Fullscreen
<svg class="ecl-icon ecl-icon--m" focusable="false" aria-hidden="true">
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg>

Try it yourself on the playground

Playground

You can pick an icon from the library we provide.

Note: display of icons on Internet Explorer is made possible by the use of svg4everybody

Color

You can use the default, primary or inverted colours:

Fullscreen
<svg class="ecl-icon ecl-icon--m" focusable="false" aria-hidden="true">
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-icon--primary" focusable="false" aria-hidden="true">
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg>

Try it yourself on the playground

Playground

Size

You can change the size of the icon by applying one of the following classes:

  • ecl-icon--2xs: 10×10
  • ecl-icon--xs: 16×16
  • ecl-icon--s: 20×20
  • ecl-icon--m: 24×24
  • ecl-icon--l: 32×32
  • ecl-icon--xl: 40×40
  • ecl-icon--2xl: 48×48
  • ecl-icon--fluid: 1em
Fullscreen

Try it yourself on the playground

Playground

Rotate icons

You can rotate icons by adding one of the following classes:

  • ecl-icon--rotate-0: 0 degree
  • ecl-icon--rotate-90: 90 degrees
  • ecl-icon--rotate-180: 180 degrees
  • ecl-icon--rotate-270: 270 degrees
Fullscreen

Try it yourself on the playground

Playground

Flip icons

You can flip icons by adding the classes ecl-icon--flip-horizontal or ecl-icon--flip-vertical.

Fullscreen
<svg class="ecl-icon ecl-icon--m ecl-icon--flip-horizontal" focusable="false" aria-hidden="true">
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-icon--flip-vertical" focusable="false" aria-hidden="true">
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg>

Try it yourself on the playground

Playground

Accessibility

If your icon is only used as a decorative element, you don't have to add any special markup.

On the other hand, if it's used as an image, you might want to add a couple of extra markup:

TitleDescription
Fullscreen
<svg class="ecl-icon ecl-icon--m" focusable="false" aria-hidden="false" role="img"
  aria-labelledby="example-title example-desc">
  <title id="example-title">Title</title>
  <desc id="example-desc">Description</desc>
  <use xlink:href="/dist/media/icons.cec58484.svg#audio"></use>
</svg>

Try it yourself on the playground

Playground