Icons

CSS-only SVG icons via mask-image. One class per icon, rhythm-aligned sizes, and NPS color modifiers. No JavaScript required.

Basic Usage

Each icon is a single class. The icon inherits the current text color via currentColor.

<i class="ug-icon-github"></i>
<i class="ug-icon-npm"></i>
<i class="ug-icon-bootstrap"></i>

Sizes

All sizes are aligned to the vertical rhythm (--ug-leading). Default size is 1 leading.

<i class="ug-icon-github ug-icon--xs"></i>
<i class="ug-icon-github ug-icon--sm"></i>
<i class="ug-icon-github"></i>
<i class="ug-icon-github ug-icon--lg"></i>
<i class="ug-icon-github ug-icon--xl"></i>
<i class="ug-icon-github ug-icon--2xl"></i>

Colors

By default icons use currentColor. Override with NPS color modifiers.

<i class="ug-icon-github ug-icon--lg ug-icon--black"></i>
<i class="ug-icon-github ug-icon--lg ug-icon--red"></i>
<i class="ug-icon-github ug-icon--lg ug-icon--brown"></i>
<i class="ug-icon-github ug-icon--lg ug-icon--green"></i>
<i class="ug-icon-github ug-icon--lg ug-icon--blue"></i>
<i class="ug-icon-github ug-icon--lg ug-icon--medium-gray"></i>

Inline with Text

Icons are inline-block and vertically centered, so they sit naturally alongside text.

Visit us on GitHub or install via npm.

GitHub

<p class="ug-body">
  Visit us on <i class="ug-icon-github"></i> GitHub or
  install via <i class="ug-icon-npm"></i> npm.
</p>

<a class="ug-btn" href="#">
  <i class="ug-icon-github ug-icon--white"></i> GitHub
</a>

Extending the Icon Set

The $ug-icons SCSS map is !default. Merge your own icons before importing Unigrid:

SCSS

@use "sass:map"; // Add custom icon before importing unigrid $ug-icons: map.merge($ug-icons, ( "mastodon": url("data:image/svg+xml,%3Csvg ...%3E%3C/svg%3E"), )); @use "unigrid.css/src/scss/unigrid" as *; // Now .ug-icon-mastodon is available

@use "sass:map";

// Add custom icon before importing unigrid
$ug-icons: map.merge($ug-icons, (
  "mastodon": url("data:image/svg+xml,%3Csvg ...%3E%3C/svg%3E"),
));

@use "unigrid.css/src/scss/unigrid" as *;

// Now .ug-icon-mastodon is available

For runtime extension without SCSS, use the optional JavaScript registry:

JavaScript

import { ugIcons, initIcons } from 'unigrid.css/src/js/icons.js'; // Add icon to the registry ugIcons.push({ name: 'mastodon', viewBox: '0 0 24 24', svg: '', }); // Inject SVG sprite (enables usage) initIcons();

import { ugIcons, initIcons } from 'unigrid.css/src/js/icons.js';

// Add icon to the registry
ugIcons.push({
  name: 'mastodon',
  viewBox: '0 0 24 24',
  svg: '<path d="M..."/>',
});

// Inject SVG sprite (enables <svg><use href="#ug-icon-mastodon"></svg> usage)
initIcons();

Available Icons

github

npm

bootstrap

Class Reference

Class	Description
`.ug-icon-github`	GitHub logo icon
`.ug-icon-npm`	npm logo icon
`.ug-icon-bootstrap`	Bootstrap logo icon
`.ug-icon`	Base class (set mask-image yourself)
`.ug-icon--xs`	Size: 0.5 × leading
`.ug-icon--sm`	Size: 0.75 × leading
`.ug-icon--md`	Size: 1 × leading (default)
`.ug-icon--lg`	Size: 1.5 × leading
`.ug-icon--xl`	Size: 2 × leading
`.ug-icon--2xl`	Size: 3 × leading
`.ug-icon--black`	Fill: $ug-black
`.ug-icon--white`	Fill: $ug-white
`.ug-icon--red`	Fill: $ug-red
`.ug-icon--brown`	Fill: $ug-brown
`.ug-icon--green`	Fill: $ug-green
`.ug-icon--blue`	Fill: $ug-blue
`.ug-icon--dark-gray`	Fill: $ug-dark-gray
`.ug-icon--medium-gray`	Fill: $ug-medium-gray
`.ug-icon--light-gray`	Fill: $ug-light-gray
`.ug-icon--current`	Fill: currentColor (default)