VGR Styleguide

SVG Sprite 

<div class="fractal--icons">

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#add-circle-outline"></use></svg>
        </div>
        <div class="fractal--icon-name">add-circle-outline</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#arrow-forward"></use></svg>
        </div>
        <div class="fractal--icon-name">arrow-forward</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#brightness-medium"></use></svg>
        </div>
        <div class="fractal--icon-name">brightness-medium</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#close"></use></svg>
        </div>
        <div class="fractal--icon-name">close</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#content-paste"></use></svg>
        </div>
        <div class="fractal--icon-name">content-paste</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#directions-car"></use></svg>
        </div>
        <div class="fractal--icon-name">directions-car</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#directions-run"></use></svg>
        </div>
        <div class="fractal--icon-name">directions-run</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#email"></use></svg>
        </div>
        <div class="fractal--icon-name">email</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#error"></use></svg>
        </div>
        <div class="fractal--icon-name">error</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#event-note"></use></svg>
        </div>
        <div class="fractal--icon-name">event-note</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#event"></use></svg>
        </div>
        <div class="fractal--icon-name">event</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#expand-more"></use></svg>
        </div>
        <div class="fractal--icon-name">expand-more</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#explore"></use></svg>
        </div>
        <div class="fractal--icon-name">explore</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#facebook"></use></svg>
        </div>
        <div class="fractal--icon-name">facebook</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#format-list-numbered"></use></svg>
        </div>
        <div class="fractal--icon-name">format-list-numbered</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#google"></use></svg>
        </div>
        <div class="fractal--icon-name">google</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#hearing"></use></svg>
        </div>
        <div class="fractal--icon-name">hearing</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#help"></use></svg>
        </div>
        <div class="fractal--icon-name">help</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#history"></use></svg>
        </div>
        <div class="fractal--icon-name">history</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#home"></use></svg>
        </div>
        <div class="fractal--icon-name">home</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#info-outline"></use></svg>
        </div>
        <div class="fractal--icon-name">info-outline</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#info"></use></svg>
        </div>
        <div class="fractal--icon-name">info</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#linkedin"></use></svg>
        </div>
        <div class="fractal--icon-name">linkedin</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#local-parking"></use></svg>
        </div>
        <div class="fractal--icon-name">local-parking</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#location-on"></use></svg>
        </div>
        <div class="fractal--icon-name">location-on</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#menu"></use></svg>
        </div>
        <div class="fractal--icon-name">menu</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#mode-edit"></use></svg>
        </div>
        <div class="fractal--icon-name">mode-edit</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#open-in-browser"></use></svg>
        </div>
        <div class="fractal--icon-name">open-in-browser</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#party-mode"></use></svg>
        </div>
        <div class="fractal--icon-name">party-mode</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#person"></use></svg>
        </div>
        <div class="fractal--icon-name">person</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#phone-iphone"></use></svg>
        </div>
        <div class="fractal--icon-name">phone-iphone</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#picture-in-picture"></use></svg>
        </div>
        <div class="fractal--icon-name">picture-in-picture</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#pinterest"></use></svg>
        </div>
        <div class="fractal--icon-name">pinterest</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#place"></use></svg>
        </div>
        <div class="fractal--icon-name">place</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#print"></use></svg>
        </div>
        <div class="fractal--icon-name">print</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#public"></use></svg>
        </div>
        <div class="fractal--icon-name">public</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#remove"></use></svg>
        </div>
        <div class="fractal--icon-name">remove</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#rss"></use></svg>
        </div>
        <div class="fractal--icon-name">rss</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#schedule"></use></svg>
        </div>
        <div class="fractal--icon-name">schedule</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#search"></use></svg>
        </div>
        <div class="fractal--icon-name">search</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#sign-language"></use></svg>
        </div>
        <div class="fractal--icon-name">sign-language</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#smoke-free"></use></svg>
        </div>
        <div class="fractal--icon-name">smoke-free</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#success"></use></svg>
        </div>
        <div class="fractal--icon-name">success</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#time"></use></svg>
        </div>
        <div class="fractal--icon-name">time</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#tram"></use></svg>
        </div>
        <div class="fractal--icon-name">tram</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#twitter"></use></svg>
        </div>
        <div class="fractal--icon-name">twitter</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#view-comfy"></use></svg>
        </div>
        <div class="fractal--icon-name">view-comfy</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#warning"></use></svg>
        </div>
        <div class="fractal--icon-name">warning</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--excel"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--excel</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--image"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--image</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--mail"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--mail</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--pdf"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--pdf</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--phone"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--phone</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--ppt"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--ppt</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--sound"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--sound</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--video"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--video</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--word"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--word</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#file-type--zip"></use></svg>
        </div>
        <div class="fractal--icon-name">file-type--zip</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#message--error"></use></svg>
        </div>
        <div class="fractal--icon-name">message--error</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#message--info"></use></svg>
        </div>
        <div class="fractal--icon-name">message--info</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#message--success"></use></svg>
        </div>
        <div class="fractal--icon-name">message--success</div>
    </div>

    <div class="fractal--icon-example">
        <div class="fractal--icon-wrapper">
            <svg class="vgr-icon" width="32" height="32"><use xlink:href="/icons/sprite/icons.svg#message--warning"></use></svg>
        </div>
        <div class="fractal--icon-name">message--warning</div>
    </div>

</div>

<style>
    .fractal--icons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .fractal--icon-example {
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        min-width: 8rem;
        margin: 1rem;
    }
    
    .fractal--icon-wrapper {
        padding: 1rem;
    }
    
    .fractal--icon-wrapper .vgr-icon {
        display: block;
        margin: 0 auto;
    }
    
    .fractal--icon-name {
        display: block;
        padding: 0 4px 4px;
        border-top: 1px solid #eee;
        text-align: center;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
    }
</style>
 
<div class="fractal--icons">
  {% for icon in icons %}
    <div class="fractal--icon-example">
      <div class="fractal--icon-wrapper">
        <svg class="vgr-icon" width="32" height="32" {% if iconLabel %} aria-label="{{ iconLabel }}"{% endif %}><use xlink:href="/icons/sprite/icons.svg#{{ icon.id }}"></use></svg>
      </div>
      <div class="fractal--icon-name">{{ icon.id }}</div>
    </div>
  {% endfor %}
</div>

<style>
  .fractal--icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fractal--icon-example {
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    min-width: 8rem;
    margin: 1rem;
  }
  .fractal--icon-wrapper {
    padding: 1rem;
  }
  .fractal--icon-wrapper .vgr-icon {
    display: block;
    margin: 0 auto;
  }

  .fractal--icon-name {
    display: block;
    padding: 0 4px 4px;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
  }
</style>
 
{
  "icons": [
    {
      "id": "add-circle-outline"
    },
    {
      "id": "arrow-forward"
    },
    {
      "id": "brightness-medium"
    },
    {
      "id": "close"
    },
    {
      "id": "content-paste"
    },
    {
      "id": "directions-car"
    },
    {
      "id": "directions-run"
    },
    {
      "id": "email"
    },
    {
      "id": "error"
    },
    {
      "id": "event-note"
    },
    {
      "id": "event"
    },
    {
      "id": "expand-more"
    },
    {
      "id": "explore"
    },
    {
      "id": "facebook"
    },
    {
      "id": "format-list-numbered"
    },
    {
      "id": "google"
    },
    {
      "id": "hearing"
    },
    {
      "id": "help"
    },
    {
      "id": "history"
    },
    {
      "id": "home"
    },
    {
      "id": "info-outline"
    },
    {
      "id": "info"
    },
    {
      "id": "linkedin"
    },
    {
      "id": "local-parking"
    },
    {
      "id": "location-on"
    },
    {
      "id": "menu"
    },
    {
      "id": "mode-edit"
    },
    {
      "id": "open-in-browser"
    },
    {
      "id": "party-mode"
    },
    {
      "id": "person"
    },
    {
      "id": "phone-iphone"
    },
    {
      "id": "picture-in-picture"
    },
    {
      "id": "pinterest"
    },
    {
      "id": "place"
    },
    {
      "id": "print"
    },
    {
      "id": "public"
    },
    {
      "id": "remove"
    },
    {
      "id": "rss"
    },
    {
      "id": "schedule"
    },
    {
      "id": "search"
    },
    {
      "id": "sign-language"
    },
    {
      "id": "smoke-free"
    },
    {
      "id": "success"
    },
    {
      "id": "time"
    },
    {
      "id": "tram"
    },
    {
      "id": "twitter"
    },
    {
      "id": "view-comfy"
    },
    {
      "id": "warning"
    },
    {
      "id": "file-type--excel"
    },
    {
      "id": "file-type--image"
    },
    {
      "id": "file-type--mail"
    },
    {
      "id": "file-type--pdf"
    },
    {
      "id": "file-type--phone"
    },
    {
      "id": "file-type--ppt"
    },
    {
      "id": "file-type--sound"
    },
    {
      "id": "file-type--video"
    },
    {
      "id": "file-type--word"
    },
    {
      "id": "file-type--zip"
    },
    {
      "id": "message--error"
    },
    {
      "id": "message--info"
    },
    {
      "id": "message--success"
    },
    {
      "id": "message--warning"
    }
  ]
}

There are no notes for this item.