The EE-Base Design System includes a small library of UI icons based off Collecticons to be used on web applications. This icon font can be easily customized using just CSS: size, color, drop shadow, etc.

Showcase

You can place EE icons just about anywhere using the respective CSS class. The icon library is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<button><i class="ee-icon-circle-information"></i> Info</button>

You can also use scss extends for a semantic approach:

<button class="bttn-info">Info</button>

.bttn-info {
  :before {
    @extend %ee-icon-circle-information;
  }
}

The advantage of the semantic approach is that there’s no need for any extra markup and it is possible to choose on which pseudo-element to apply the icon.