Design System

Iconography

Showcase and instructions for the OAM UI icon library.

The OAM 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

  • oam-ds-icon-circle-exclamation
  • oam-ds-icon-circle-information
  • oam-ds-icon-circle-question
  • oam-ds-icon-circle-tick
  • oam-ds-icon-circle-xmark
  • oam-ds-icon-clock
  • oam-ds-icon-disc-xmark
  • oam-ds-icon-download
  • oam-ds-icon-hamburger-menu
  • oam-ds-icon-pencil
  • oam-ds-icon-sm-chevron-down
  • oam-ds-icon-sm-chevron-left
  • oam-ds-icon-sm-chevron-right
  • oam-ds-icon-sm-chevron-up
  • oam-ds-icon-sm-tick
  • oam-ds-icon-sm-xmark
  • oam-ds-icon-sort-asc
  • oam-ds-icon-sort-desc
  • oam-ds-icon-sort-none
  • oam-ds-icon-sort
  • oam-ds-icon-tick
  • oam-ds-icon-trash-bin
  • oam-ds-icon-xmark

Usage

You can place OAM 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="oam-ds-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 %oam-ds-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.