Fill Icons

The Fill icons are icons that use fill in their svg code rather then strokes based on their design. These need to be separate by CSS classes because dynamically changing the color of fill icons is different then stroke icons.

A developer can tell the difference between the normal stroke icons and fill icons because fill icons will always be prefixed with i-fill in their svg file name.

Icon names

All currently available fill icons are as follows:

  • i-fill-app
  • i-fill-space
  • i-fill-org

Icon color variances

  • icon-alt
  • icon-ok
  • icon-error

Use

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

<svg class="icon icon-fill">

To change the color of the icon, there are icon style color classes can be used. The fill icons have more color options available: ok and error.

Bordered

Additionally, fill icons have the possibility to be made bordered, which will apply a thin border around the icon of the same color as the color defined by the variance class. The border width and the spacing between the border and the icon are relative to the font size of the icon’s parent element, similarly to how the icon’s size works. This means if you place an icon in a h3 tag, the border and spacing around the border will scale to the font size of the h3.

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:

  • Not include any inline color styling, such as fill or stroke. If the system the icon was exported from added rules within the svg such as fill="#333333", these attributes must be removed.
  • Follow the rules defined in the normal icons instructions for adding a new icon.

Caveats

In order to make the fill icons correctly color based on their color class, the icon has to be made up of only fills and likely cannot include any white sections that overlap with other sections.

<!-- Org Small -->
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Medium -->
<svg class="icon icon-medium icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Large -->
<svg class="icon icon-large icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org White Small -->
<svg class="icon icon-small icon-fill icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org White Medium -->
<svg class="icon icon-medium icon-fill icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org White Large -->
<svg class="icon icon-large icon-fill icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Active Small -->
<svg class="icon icon-small icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Active Medium -->
<svg class="icon icon-medium icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Active Large -->
<svg class="icon icon-large icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Disabled Small -->
<svg class="icon icon-small icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Disabled Medium -->
<svg class="icon icon-medium icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Org Disabled Large -->
<svg class="icon icon-large icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

<!-- Space Small -->
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Medium -->
<svg class="icon icon-medium icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Large -->
<svg class="icon icon-large icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space White Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space White Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space White Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Small Reverse -->
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Medium Reverse -->
<svg class="icon icon-medium icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Large Reverse -->
<svg class="icon icon-large icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Disabled Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Disabled Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Disabled Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Disabled Small Reverse -->
<svg class="icon icon-small icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Disabled Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Disabled Large Reverse -->
<svg class="icon icon-large icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Active Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Active Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Active Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Active Small Reverse -->
<svg class="icon icon-small icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Active Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Active Large Reverse -->
<svg class="icon icon-large icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Ok Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Ok Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Ok Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Ok Small Reverse -->
<svg class="icon icon-small icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Ok Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Ok Large Reverse -->
<svg class="icon icon-large icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Error Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Error Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Error Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

<!-- Space Error Small Reverse -->
<svg class="icon icon-small icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Error Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- Space Error Large Reverse -->
<svg class="icon icon-large icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space--reverse" >
  </use>
</svg>

<!-- App Small -->
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Medium -->
<svg class="icon icon-medium icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Large -->
<svg class="icon icon-large icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App White Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App White Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App White Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Small Reverse -->
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Medium Reverse -->
<svg class="icon icon-medium icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Large Reverse -->
<svg class="icon icon-large icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Disabled Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Disabled Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Disabled Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Disabled Small Reverse -->
<svg class="icon icon-small icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Disabled Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Disabled Large Reverse -->
<svg class="icon icon-large icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Active Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Active Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Active Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Active Small Reverse -->
<svg class="icon icon-small icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Active Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Active Large Reverse -->
<svg class="icon icon-large icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Ok Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Ok Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Ok Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Ok Small Reverse -->
<svg class="icon icon-small icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Ok Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Ok Large Reverse -->
<svg class="icon icon-large icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Error Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Error Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Error Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

<!-- App Error Small Reverse -->
<svg class="icon icon-small icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Error Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- App Error Large Reverse -->
<svg class="icon icon-large icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app--reverse" >
  </use>
</svg>

<!-- Service Small -->
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Medium -->
<svg class="icon icon-medium icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Large -->
<svg class="icon icon-large icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service White Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service White Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service White Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Ok Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Ok Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Ok Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Ok Small Reverse -->
<svg class="icon icon-small icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Ok Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Ok Large Reverse -->
<svg class="icon icon-large icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Small Reverse -->
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Medium Reverse -->
<svg class="icon icon-medium icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Large Reverse -->
<svg class="icon icon-large icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Error Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Error Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Error Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service" >
  </use>
</svg>

<!-- Service Error Small Reverse -->
<svg class="icon icon-small icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Error Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Service Error Large Reverse -->
<svg class="icon icon-large icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-service--reverse" >
  </use>
</svg>

<!-- Home Small -->
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Medium -->
<svg class="icon icon-medium icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Large -->
<svg class="icon icon-large icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home White Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home White Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home White Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Small Reverse -->
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Medium Reverse -->
<svg class="icon icon-medium icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Large Reverse -->
<svg class="icon icon-large icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Disabled Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Disabled Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Disabled Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Disabled Small Reverse -->
<svg class="icon icon-small icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Disabled Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Disabled Large Reverse -->
<svg class="icon icon-large icon-fill icon-disabled">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Active Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Active Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Active Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Active Small Reverse -->
<svg class="icon icon-small icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Active Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Active Large Reverse -->
<svg class="icon icon-large icon-fill icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Ok Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Ok Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Ok Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Ok Small Reverse -->
<svg class="icon icon-small icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Ok Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Ok Large Reverse -->
<svg class="icon icon-large icon-fill icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Error Small -->
<svg class="icon icon-small icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Error Medium -->
<svg class="icon icon-medium icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Error Large -->
<svg class="icon icon-large icon-fill icon-bordered icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

<!-- Home Error Small Reverse -->
<svg class="icon icon-small icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Error Medium Reverse -->
<svg class="icon icon-medium icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<!-- Home Error Large Reverse -->
<svg class="icon icon-large icon-fill icon-error">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home--reverse" >
  </use>
</svg>

<svg class="icon icon-{{ iconSize }} icon-fill {% if isBorder %}icon-bordered {% endif %}{% if iconStatus %}icon-{{ iconStatus }}{% endif %}">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-{{ iconKind }}{% if isReverse  %}--reverse{% endif %}" >
  </use>
</svg>
/* Org Small */
{
  "iconKind": "org",
  "iconSize": "small",
  "isBorder": null
}

/* Org Medium */
{
  "iconKind": "org",
  "iconSize": "medium",
  "isBorder": null
}

/* Org Large */
{
  "iconKind": "org",
  "iconSize": "large",
  "isBorder": null
}

/* Org White Small */
{
  "iconStatus": "white",
  "iconKind": "org",
  "iconSize": "small",
  "isBorder": null
}

/* Org White Medium */
{
  "iconStatus": "white",
  "iconKind": "org",
  "iconSize": "medium",
  "isBorder": null
}

/* Org White Large */
{
  "iconStatus": "white",
  "iconKind": "org",
  "iconSize": "large",
  "isBorder": null
}

/* Org Active Small */
{
  "iconStatus": "active",
  "iconKind": "org",
  "iconSize": "small",
  "isBorder": null
}

/* Org Active Medium */
{
  "iconStatus": "active",
  "iconKind": "org",
  "iconSize": "medium",
  "isBorder": null
}

/* Org Active Large */
{
  "iconStatus": "active",
  "iconKind": "org",
  "iconSize": "large",
  "isBorder": null
}

/* Org Disabled Small */
{
  "iconStatus": "disabled",
  "iconKind": "org",
  "iconSize": "small",
  "isBorder": null
}

/* Org Disabled Medium */
{
  "iconStatus": "disabled",
  "iconKind": "org",
  "iconSize": "medium",
  "isBorder": null
}

/* Org Disabled Large */
{
  "iconStatus": "disabled",
  "iconKind": "org",
  "iconSize": "large",
  "isBorder": null
}

/* Space Small */
{
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space Medium */
{
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space Large */
{
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space White Small */
{
  "iconStatus": "white",
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space White Medium */
{
  "iconStatus": "white",
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space White Large */
{
  "iconStatus": "white",
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space Small Reverse */
{
  "iconKind": "space",
  "iconSize": "small",
  "isReverse": true
}

/* Space Medium Reverse */
{
  "iconKind": "space",
  "iconSize": "medium",
  "isReverse": true
}

/* Space Large Reverse */
{
  "iconKind": "space",
  "iconSize": "large",
  "isReverse": true
}

/* Space Disabled Small */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space Disabled Medium */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space Disabled Large */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space Disabled Small Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "small",
  "isReverse": true
}

/* Space Disabled Medium Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "medium",
  "isReverse": true
}

/* Space Disabled Large Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "space",
  "iconSize": "large",
  "isReverse": true
}

/* Space Active Small */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space Active Medium */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space Active Large */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space Active Small Reverse */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "small",
  "isReverse": true
}

/* Space Active Medium Reverse */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "medium",
  "isReverse": true
}

/* Space Active Large Reverse */
{
  "iconStatus": "active",
  "iconKind": "space",
  "iconSize": "large",
  "isReverse": true
}

/* Space Ok Small */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space Ok Medium */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space Ok Large */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space Ok Small Reverse */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "small",
  "isReverse": true
}

/* Space Ok Medium Reverse */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "medium",
  "isReverse": true
}

/* Space Ok Large Reverse */
{
  "iconStatus": "ok",
  "iconKind": "space",
  "iconSize": "large",
  "isReverse": true
}

/* Space Error Small */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "small",
  "isBorder": true
}

/* Space Error Medium */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "medium",
  "isBorder": true
}

/* Space Error Large */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "large",
  "isBorder": true
}

/* Space Error Small Reverse */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "small",
  "isReverse": true
}

/* Space Error Medium Reverse */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "medium",
  "isReverse": true
}

/* Space Error Large Reverse */
{
  "iconStatus": "error",
  "iconKind": "space",
  "iconSize": "large",
  "isReverse": true
}

/* App Small */
{
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App Medium */
{
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App Large */
{
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App White Small */
{
  "iconStatus": "white",
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App White Medium */
{
  "iconStatus": "white",
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App White Large */
{
  "iconStatus": "white",
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App Small Reverse */
{
  "iconKind": "app",
  "iconSize": "small",
  "isReverse": true
}

/* App Medium Reverse */
{
  "iconKind": "app",
  "iconSize": "medium",
  "isReverse": true
}

/* App Large Reverse */
{
  "iconKind": "app",
  "iconSize": "large",
  "isReverse": true
}

/* App Disabled Small */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App Disabled Medium */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App Disabled Large */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App Disabled Small Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "small",
  "isReverse": true
}

/* App Disabled Medium Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "medium",
  "isReverse": true
}

/* App Disabled Large Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "app",
  "iconSize": "large",
  "isReverse": true
}

/* App Active Small */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App Active Medium */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App Active Large */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App Active Small Reverse */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "small",
  "isReverse": true
}

/* App Active Medium Reverse */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "medium",
  "isReverse": true
}

/* App Active Large Reverse */
{
  "iconStatus": "active",
  "iconKind": "app",
  "iconSize": "large",
  "isReverse": true
}

/* App Ok Small */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App Ok Medium */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App Ok Large */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App Ok Small Reverse */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "small",
  "isReverse": true
}

/* App Ok Medium Reverse */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "medium",
  "isReverse": true
}

/* App Ok Large Reverse */
{
  "iconStatus": "ok",
  "iconKind": "app",
  "iconSize": "large",
  "isReverse": true
}

/* App Error Small */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "small",
  "isBorder": true
}

/* App Error Medium */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "medium",
  "isBorder": true
}

/* App Error Large */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "large",
  "isBorder": true
}

/* App Error Small Reverse */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "small",
  "isReverse": true
}

/* App Error Medium Reverse */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "medium",
  "isReverse": true
}

/* App Error Large Reverse */
{
  "iconStatus": "error",
  "iconKind": "app",
  "iconSize": "large",
  "isReverse": true
}

/* Service Small */
{
  "iconKind": "service",
  "iconSize": "small",
  "isBorder": true
}

/* Service Medium */
{
  "iconKind": "service",
  "iconSize": "medium",
  "isBorder": true
}

/* Service Large */
{
  "iconKind": "service",
  "iconSize": "large",
  "isBorder": true
}

/* Service White Small */
{
  "iconStatus": "white",
  "iconKind": "service",
  "iconSize": "small",
  "isBorder": true
}

/* Service White Medium */
{
  "iconStatus": "white",
  "iconKind": "service",
  "iconSize": "medium",
  "isBorder": true
}

/* Service White Large */
{
  "iconStatus": "white",
  "iconKind": "service",
  "iconSize": "large",
  "isBorder": true
}

/* Service Ok Small */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "small",
  "isBorder": true
}

/* Service Ok Medium */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "medium",
  "isBorder": true
}

/* Service Ok Large */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "large",
  "isBorder": true
}

/* Service Ok Small Reverse */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "small",
  "isReverse": true
}

/* Service Ok Medium Reverse */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "medium",
  "isReverse": true
}

/* Service Ok Large Reverse */
{
  "iconStatus": "ok",
  "iconKind": "service",
  "iconSize": "large",
  "isReverse": true
}

/* Service Small Reverse */
{
  "iconKind": "service",
  "iconSize": "small",
  "isReverse": true
}

/* Service Medium Reverse */
{
  "iconKind": "service",
  "iconSize": "medium",
  "isReverse": true
}

/* Service Large Reverse */
{
  "iconKind": "service",
  "iconSize": "large",
  "isReverse": true
}

/* Service Error Small */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "small",
  "isBorder": true
}

/* Service Error Medium */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "medium",
  "isBorder": true
}

/* Service Error Large */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "large",
  "isBorder": true
}

/* Service Error Small Reverse */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "small",
  "isReverse": true
}

/* Service Error Medium Reverse */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "medium",
  "isReverse": true
}

/* Service Error Large Reverse */
{
  "iconStatus": "error",
  "iconKind": "service",
  "iconSize": "large",
  "isReverse": true
}

/* Home Small */
{
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home Medium */
{
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home Large */
{
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home White Small */
{
  "iconStatus": "white",
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home White Medium */
{
  "iconStatus": "white",
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home White Large */
{
  "iconStatus": "white",
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home Small Reverse */
{
  "iconKind": "home",
  "iconSize": "small",
  "isReverse": true
}

/* Home Medium Reverse */
{
  "iconKind": "home",
  "iconSize": "medium",
  "isReverse": true
}

/* Home Large Reverse */
{
  "iconKind": "home",
  "iconSize": "large",
  "isReverse": true
}

/* Home Disabled Small */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home Disabled Medium */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home Disabled Large */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home Disabled Small Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "small",
  "isReverse": true
}

/* Home Disabled Medium Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "medium",
  "isReverse": true
}

/* Home Disabled Large Reverse */
{
  "iconStatus": "disabled",
  "iconKind": "home",
  "iconSize": "large",
  "isReverse": true
}

/* Home Active Small */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home Active Medium */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home Active Large */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home Active Small Reverse */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "small",
  "isReverse": true
}

/* Home Active Medium Reverse */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "medium",
  "isReverse": true
}

/* Home Active Large Reverse */
{
  "iconStatus": "active",
  "iconKind": "home",
  "iconSize": "large",
  "isReverse": true
}

/* Home Ok Small */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home Ok Medium */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home Ok Large */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home Ok Small Reverse */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "small",
  "isReverse": true
}

/* Home Ok Medium Reverse */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "medium",
  "isReverse": true
}

/* Home Ok Large Reverse */
{
  "iconStatus": "ok",
  "iconKind": "home",
  "iconSize": "large",
  "isReverse": true
}

/* Home Error Small */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "small",
  "isBorder": true
}

/* Home Error Medium */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "medium",
  "isBorder": true
}

/* Home Error Large */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "large",
  "isBorder": true
}

/* Home Error Small Reverse */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "small",
  "isReverse": true
}

/* Home Error Medium Reverse */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "medium",
  "isReverse": true
}

/* Home Error Large Reverse */
{
  "iconStatus": "error",
  "iconKind": "home",
  "iconSize": "large",
  "isReverse": true
}