Icon code

How to use icons on the website

The icon system has been designed to work with inline SVG.

Non-SVG icons can be used but we recommend using inline SVG for all kinds of reasons, but mainly the following:

• Clarity is maintained when images are scaled
• Designers only need to provide a single file which can modified with CSS to provide different sizes
• They can be dynamically modified in the browser for enhanced visual effects
• There’s no need for extra browser requests as the images are available instantly when the HTML is loaded

Icon sizes:

Icons sizes are based on the 8px grid.

• small: 16px;
• medium: 24px;
• large: 48px;
• huge: 72px;
• gargantuan: 120px;
• colossal: 192px;

The values have been picked so that developers and designers can look at designs and interfaces and know the gaps between elements without the need to measure them.

How we work with icon sizes

In most instances the icon utility classes can be used.

When you need to change the size of the icon dynamically (e.g. different sizes for small and large screens), or have a rectangular icon, the icon sizes can be obtained by using the getIconSize($size) function, where $size is the English term for the size required.

How they look

1. Set icon sizes with utilty classes:

    <svg class="gg-u-icon gg-u-icon--small" viewBox="0 0 100 100" title="icon-small">
  <rect width="100" height="100" />
</svg>
<br>
<svg class="gg-u-icon gg-u-icon--medium" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>
<br>
<svg class="gg-u-icon gg-u-icon--large" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>
<br>
<svg class="gg-u-icon gg-u-icon--huge" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>
<br>
<svg class="gg-u-icon gg-u-icon--gargantuan" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>
<br>
<svg class="gg-u-icon gg-u-icon--colossal" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>

  

2. Vertically aligning icons with text

    <p>
  <svg class="gg-u-icon gg-u-icon--medium gg-u-icon--inline" viewBox="0 0 100 100">
    <rect width="100" height="100" />
  </svg>
  Example text
</p>

  

2. Horizontally aligning icons

    <svg class="gg-u-icon gg-u-icon--medium gg-u-icon--center" viewBox="0 0 100 100">
  <rect width="100" height="100" />
</svg>

  

3. Medium icon on small screens and huge icon on a larger screens:

.el {
    height: getIconSize(medium);
    width: getIconSize(medium);

    @media (min-width: 960px) {
      height: getIconSize(huge);
      width: getIconSize(huge);
    }
}

4. Set the size of a rectangular icon:

.el {
    height: getIconSize(medium);
    width: getIconSize(large);
}

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.