Iconography

The icons we use at Zuto are all SVG. We keep all of our static assets such as images and font files in a seperate repository https://github.com/carloan4u/Assets

All our SVG icons are compiled into a sprite sheet which is deployed to our CDN. Our spritesheet is loaded via Ajax and placed in the head of our HTML. Check the code examples below to see how access icons from within out SVG spritesheet. When the SVG spritesheet is loaded into the page, it is saved into local storage.

Our CDN is cached. If you have deployed changes to any files on the CDN chances are you can't see them. Check out our documentation for purging files on ZutoCDN.

Standard Icon

Icon circle with border

Large icon circle with border

To use an icon in a larger circle add a class of .large to the element with the class of .icon.

Coloured icon circle

You can chage the colour of the circle by adding any of our colours to the circle wrapper element as a CSS class. To see all available colours check out the Brand Colour page.

Icon colour

You can chage the colour of any icon by adding the CSS class fill-gold (or fill-brand-colour) to the svg element. You can use any of our brand colours.

Icon stacked

An icon with text underneath.

    
      

        
        Favourite
      
    
  

Icon Inline

An icon with text inline.

Header

    
      

    
      
    
    Header
  
  
  

Icon Block Text

An icon with a block of text that wraps when the amount of copy is unable to fit onto one line.

We'll be in touch as soon as we've got a decision

    
      

    
      
    
    We'll be in touch as soon as we've got a decision