Icons

You can pick an icon from the icon library (provided by Webtools).

Color

You can use the default, primary or inverted colours:

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

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

Flip icons

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

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: