Icons

The icon component display an icon from the library.

This is an icon within text.

  • Color is inherited from text color. To overide a color use a class utility like u-color-accent-green on the icon.
  • Icons are set as inline-flex by default. There is a small correction on the vertical-alignement to fit nicely aligned with surrounding text.

Sizes

c-icon
c-icon--s

c-icon

c-icon
c-icon--l

The default icon size is m (24px). Some icons are available in s (16px) and l (32px) size.

Always take care to load the corresponding s, m or l SVG file for the icon and add the right size class variant.

Transformations

c-icon

c-icon
c-icon--rotate-right

c-icon
c-icon--rotate-left

c-icon
c-icon--rotate-180

c-icon
c-icon--mirror-h

c-icon
c-icon--mirror-v

Debug

This is an icon

This is an icon

This is an icon

This is an icon

This is an icon