Icon Ui

The icon ui component is used to assist the user and make the components easier to understand.


To use the icon ui icons, follow the same directions as the normal icons and add a icon-fill class to the svg element.

<svg class="icon icon-fill">

Adding new icons

To add a new fill icon, import an svg file into the src/img/ folder with the following naming scheme:

src/img/i-fill-{icon name}.svg

Where icon name is any underscore spaced name of your choice. Additionally, the svg code for the icon must:

<svg class="icon icon-fill icon-white icon-chevron-up">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
<svg class="icon icon-fill {% if iconWhite %}icon-white{% endif %} icon-{{ iconKind }}{% if iconOrientation %}-{{ iconOrientation }}{% endif %}">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-{{ iconKind }}" >
  "iconKind": "chevron",
  "iconOrientation": "up",
  "iconWhite": true