Icons

Usage

Use the href attribute to reference the icon in the included sprite. The name of the icon is the id of the symbol in the sprite.

<svg class="env-icon env-icon--medium">
   <use href="/sitevision/envision-icons.svg#icon-thumb-up"></use>
</svg>

For custom SVG icons, set the class env-icon on the SVG element.

<svg class="env-icon env-icon--medium" viewBox="0 0 122.88 106.16">
   <path
      d="M4.03 61.56h27.36c2.21 0 4.02-1.81 4.02-4.02V4.03C35.41 1.81 33.6 0 31.39 0H4.03C1.81 0 0 1.81 0 4.03v53.51c0 2.21 1.81 4.02 4.03 4.02zm59.03 40.14c2.12 10.75 19.72.85 20.88-16.48.35-5.3-.2-11.47-1.5-18.36h25.15c10.46-.41 19.59-7.9 13.14-20.2 1.47-5.36 1.69-11.65-2.3-14.13.5-8.46-1.84-13.7-6.22-17.84-.29-4.23-1.19-7.99-3.23-10.88C105.6-.96 102.86.18 97.54.18H55.07c-6.73 0-10.4 1.85-14.8 7.37v47.31c12.66 3.42 19.39 20.74 22.79 32.11v14.73z"
   />
</svg>

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

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 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.

<svg class="env-icon env-icon--small env-icon--attention">
   <use href="/sitevision/envision-icons.svg#icon-bell"></use>
</svg>

<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class="env-icon env-icon--small"
>
   <circle cx="20" cy="4" r="4" class="env-icon--attention"></circle>
   <g transform="matrix(1,0,0,1,0,0)">
      <path
         d="M12,24c-1.23,0-2.36-.8-2.72-2.04-.12-.4,.11-.81,.51-.93,.4-.11,.81,.11,.93,.51,.21,.71,.95,1.11,1.66,.91,.44-.13,.78-.47,.91-.91,.12-.4,.54-.62,.93-.51,.4,.12,.62,.53,.51,.93-.27,.93-.99,1.65-1.92,1.92-.27,.08-.53,.11-.8,.11Z"
      ></path>
      <path
         d="M12,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41,.34-.75,.75-.75s.75,.34,.75,.75V3c0,.41-.34,.75-.75,.75Z"
      ></path>
      <path
         d="M21,19.5H3c-.29,0-.55-.16-.67-.42-.13-.26-.09-.56,.08-.79,0,0,1.34-1.9,1.34-7.79C3.75,5.95,7.45,2.25,12,2.25c.37,0,.74,.02,1.1,.07,.41,.06,.7,.43,.64,.84-.05,.41-.44,.7-.84,.64-.3-.04-.6-.06-.9-.06-3.72,0-6.75,3.03-6.75,6.75,0,3.95-.57,6.26-1.04,7.5h15.5c-.45-1.16-.92-3.26-.96-6.99,0-.41,.33-.75,.74-.76,.42-.03,.75,.33,.76,.74,.06,5.91,1.24,7.19,1.25,7.2,.25,.2,.33,.52,.22,.82-.11,.3-.41,.49-.73,.49Z"
      ></path>
   </g>
</svg>