Icons
Sizes
Icon size utility classes are named using the format: env-icon--{size}
Valid values for size
xx-small
x-small
small
medium
large
x-large
xx-large
<div class="icons-demo">
<ul class="env-list env-list--horizontal">
<li class="env-list__item">
<svg class="env-icon env-icon--xx-small">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--x-small">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--small">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--medium">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--large">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--x-large">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
<li class="env-list__item">
<svg class="env-icon env-icon--xx-large">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</li>
</ul>
</div>
Inactive
An icon can be marked as inactive by adding modifier: env-icon--inactive
which will lower opacity and add a hover effect.
<div class="env-d--flex env-justify-content--center">
<svg class="env-icon env-icon--xx-large env-icon--inactive">
<use xlink:href="/sitevision/envision-icons.svg#icon-user"></use>
</svg>
</div>
Attention
2023.02.1
For Envision icons and custom inline SVG images you may use modifier env-icon--attention
on the icon or on part of an icon. The modifier will set the color to Status color Attention.