Icon

Colors

icon--gray icon--gray-light icon--gray-lighter

<svg class="icon icon--lg icon--brand-primary" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--lg icon--gray" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--lg icon--gray-light" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--lg icon--gray-lighter" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>
			  

Size

.icon--xs .icon--sm .icon--md .icon--lg .icon--xl .icon--xxl

<svg class="icon icon--xs" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--sm" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--md" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--lg" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--xl" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>

<svg class="icon icon--xxl" viewBox="0 0 32 32">
  <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
</svg>