Components

Icons

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

Try it yourself on the playground

Playground

You can pick an icon from the library we provide.

The ID of the icon is prefixed with its set: for example, the ID of the "audio" icon from the "general" set is general--audio.

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

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--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 focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m ecl-icon--flip-horizontal">
  <use xlink:href="/dist/media/icons.1dbe9812.svg#general--audio"></use>
</svg><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m ecl-icon--flip-vertical">
  <use xlink:href="/dist/media/icons.1dbe9812.svg#general--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 focusable="false" aria-hidden="false" aria-labelledby="example-title example-desc" role="img"
  class="ecl-icon ecl-icon--m">
  <title id="example-title">Title</title>
  <desc id="example-desc">Description</desc>
  <use xlink:href="/dist/media/icons.1dbe9812.svg#general--audio"></use>
</svg>

Try it yourself on the playground

Playground