Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Icon with text

An icon with text combines a short label with a representative icon in order to make the information easier to scan and identify.

This component has a generic purpose – it can be used in broad range of cases. The length of the text should be limited. The icon is always presented on the left side of the label. By default the label defines the size and colour of the icon.

Reply
.m-icon-with-text
  = render partial: 'shared/svg_icons/cmt_open'
  %span.m-icon-with-text__text Reply