cloud.gov pattern library

Icons: Plan

Icons

The Icons allow for a set of icons to be rendered in a block container or inline next to text. The icons can be colored as either black or “alt” blue. All icons are implemented in svg and are served using the svg use:xlink attribute to specify the specific icon or symbal in the svg sprite file.

Icons can either be used inline by just using the svg or put in a boxed container called icon-container that provides a certain standard spacing and sizing.

Inline icons will adjust to the font-size of their parent element. This means if you put an inline icon with an h2 it’s height will fill the height of the h2. They will also add space before and after any sibling element. This means if you put an icon next to a <span> or similar inline element, the icon will take care of adding some spacing between them.

Fill icons

The base set of icons are implemented in svg with strokes. Additionally, there is a set of icons that are implemented using fills, see fill icons.

Icon names

All currently available main icons are as follows:

  • i-agreement
  • i-checked
  • i-compass
  • i-court
  • i-double_arrow
  • i-download
  • i-export
  • i-locked
  • i-paperwork
  • i-plan
  • i-power
  • i-search
  • i-shipping
  • i-user
  • i-user_researched

Color variances

  • icon-alt

Use

Icons can be used inline in text or spaced in a standard way with the icon container.

Inline

Include an svg tag with the icon class along with any color modifier classes such as icon-alt. Within the svg tag, the svg use tag is used, with an attribute called xlink. The xlink attribute has an additonal href part of it so the whole thing looks like xlink:href. The value of this attribute should be the cloudgov svg sprite, cloudgov-sprite.svg along with the specific icon name after a #. The icon name should always include the i- part. Be sure to close the <use> tag. An example looks like:

<use xlink:href="/img/cloudgov-sprite.svg#i-agreement"></use>

The path to the cloudgov svg sprite may differ depending on project setup.

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-{icon name}.svg

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

  • Not include any inline color styling for stroke. If the system the icon was exported from added rules within the svg elements such as stroke=#222222", these attributes must be removed. Other attributes such as stroke-width should be left alone.
  • Include a title tag that expresses what the icon is.
  • Has a viewbox set to 0 0 and then some number relating to the width and height.
<div class="icon-container">
    <svg class="icon ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="/img/cloudgov-sprite.svg#i-plan"></use>
  </svg>
</div>
 
<div class="icon-container">
  <svg class="icon {% if isAlt %}icon-alt{% endif %}">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="/img/cloudgov-sprite.svg#i-{{ iconName }}"></use>
  </svg>
</div>
 
{
  "iconName": "plan",
  "isAlt": null
}