How to format the size, color and appearance of Vantage's suite of icons. o see all available icons graphics see the Icons page.
Basic Usage
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>.icon
Apply to <svg> to format as an icon
Sizes
<svg class="icon icon-lg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>.icon-sm
Apply to .icon to reduce default size
.icon-md
Apply to .icon to slightly increase default size
.icon-lg
Apply to .icon to greatly increase default size
Colors - Theme
<svg class="icon bg-primary" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>.bg-primary
Apply to .icon to adjust the icons color
.bg-primary-2
Apply to .icon to adjust the icons color
.bg-primary-3
Apply to .icon to adjust the icons color
Colors - Bootstrap
<svg class="icon bg-warning" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>.bg-secondary
Apply to .icon to adjust the icons color
.bg-success
Apply to .icon to adjust the icons color
.bg-danger
Apply to .icon to adjust the icons color
.bg-warning
Apply to .icon to adjust the icons color
.bg-info
Apply to .icon to adjust the icons color
.bg-dark
Apply to .icon to adjust the icons color
Rounded Style
<div class="icon-round bg-primary">
<svg class="icon bg-primary" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon For Display#1</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11,20 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,20 L15.5,20 C15.7761424,20 16,20.2238576 16,20.5 C16,20.7761424 15.7761424,21 15.5,21 L8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L11,20 Z" fill="#000000" opacity="0.3"></path>
<path d="M3,5 L21,5 C21.5522847,5 22,5.44771525 22,6 L22,16 C22,16.5522847 21.5522847,17 21,17 L3,17 C2.44771525,17 2,16.5522847 2,16 L2,6 C2,5.44771525 2.44771525,5 3,5 Z M4.5,8 C4.22385763,8 4,8.22385763 4,8.5 C4,8.77614237 4.22385763,9 4.5,9 L13.5,9 C13.7761424,9 14,8.77614237 14,8.5 C14,8.22385763 13.7761424,8 13.5,8 L4.5,8 Z M4.5,10 C4.22385763,10 4,10.2238576 4,10.5 C4,10.7761424 4.22385763,11 4.5,11 L7.5,11 C7.77614237,11 8,10.7761424 8,10.5 C8,10.2238576 7.77614237,10 7.5,10 L4.5,10 Z" fill="#000000"></path>
</g>
</svg>
</div>.icon-round
Wrap the <svg> icon element to format as a rounded icon
.icon-round-xs
Apply to .icon-round element to greatly reduce default size
.icon-round-sm
Apply to .icon-round element to reduce default size
.icon-round-lg
Apply to .icon-round element to increase default size
.bg-primary
Apply to .icon-round element to modify background color
.bg-primary-1
Apply to .icon-round element to modify background color
.bg-primary-2
Apply to .icon-round element to modify background color