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/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--lg icon--gray" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--lg icon--gray-light" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--lg icon--gray-lighter" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg>
.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/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--sm" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--md" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--lg" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--xl" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg> <svg class="icon icon--xxl" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#home"></use></svg>