R A D I U S

Icons

Description

Collection of symbols used to represent an object visually or to convey a particular message. Icons are consolidated into a single, external sprite to avoid multiple requests.

Icon prep

Take individual SVG icons provided by design (ensure they have converted strokes to outlines before exporting, or if you are exporting from the Sketch file ensure that you do this). All icons should be on a transparent background. Apart from two-colour icons which should have the solid background colour set to #75227D. Add icons to the correct folder src/m2dm/assets/icons and name the icon according to the following guidelines:

Naming conventions

Follow the naming system to ensure consistency: [name]-[direction?]-[outline/solid?] e.g. minus, minus-circle-outline, minus-circle-solid or arrow-left (those marked with ? are optional).

HTML Usage

In order to use our SVG icons, we need place them in the HTML. This means that we cannot use them in CSS background images or in pseudo elments like ::before. The name of the icon will be used as the fragment identifier when we reference it from our markup using the <svg> and <use> elements:

 <svg class="svg-icon">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#icon-name"></use>
 </svg>

#icon-name is the fragment identifier used to reference the id from the <symbol> element in the sprite. In the example above the #icon-name fragment identifier tells the browser to use the symbol with the ID of the same name from the svg-sprite.svg.

Accessibility

In cases where you don't want screen readers to try reading the icon out add aria-hidden="true" - this might be true if there is already relevant text in context and any cases where the icon is used only for decoration and/or doesn't add any signficant or additional value:

 <svg class="svg-icon" aria-hidden="true">
    Close
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
 </svg>

In cases with a link or a button whose only content is an icon use aria-label on the <a> or <button> element:

 <a href="#" aria-label="close">
    <svg class="svg-icon">
      <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
    </svg>
 </a>

When using SVGs outside interactive elements, like buttons and links (where aria-label might not be read by some screen readers), you can use the <title> element with a unique id and combine with aria-labelledby="title-id":

 <svg class="svg-icon" role="img" aria-labelledby="close">
    <title id="close">Close modal window</title>
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
 </svg>

As accessibility text can change depending on context and also language - alt text should live in the same place that the icon is inserted. As such <title> elements are removed from the sprite as part of the sprite build process. (Also screen readers often ignore <title> elements from sprites). For example, a cross icon can mean close but also be used as an icon for an error notification.

Visual Usage

Our icons often coexist with text, so they inherit the text color and flow with the text by default. Add the .svg-icon class to all svg icons and any modifier classes needed to change the default color and/or size.

Sizing

Most icons occupy a square artboard of 24px and are set to a default size of 1rem using the svg-icon class as our default font size is 1rem. Icons can also be resized using the size modifier classes listed below.

Alignment

Both the svg and any adjacent sibling element, e.g. accompanying text, are vertically aligned to the middle of the parent element's middle.

Single colour icons

Default colour is get-color(grey), inherited from the default colour set on the <body> element. Icon colour can be updated using the colour modifier classes listed below.

Two tone/colour icons

Adding two tone/colour icons to Radius
If you want to add a two-tone icon, set the solid background colour of icon to #75227D.

Using two tone/colour icons in Radius
There are a number of predefined modifier classes that can be used to set two different colours on the icon e.g. svg-icon--solid (see the modifiers section below to see the preset options available). Example using predefined classes:

 <svg class="svg-icon svg-icon--solid-error">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-solid"></use>
 </svg>

To use two-tone icons that are not predefined use the set-two-icon-colors mixin (the 1st argument passed to this mixin sets the solid background color of the icon, the 2nd argument sets the color of the inner icon). Example using the mixin: set-two-icon-colors(get-color(orange), get-color(blue));

How two-tone icons are created
During the build process #75227D is replaced by currentColor. By setting the fill attribute of the primary (solid, background) colour of the icon to currentColor it will inherit whatever value is held by the color property. We can then set a secondary color for the inner icon, by stripping out the fill attribute during the build process and using the fill property to declare a different colour in CSS. CSS is used to declare both a fill and color on the SVG element (for a shortcut use the set-two-icon-colors mixin).

Modifiers for size:

svg-icon--xsmall - changes icon size to 0.625rem (10px)
svg-icon--small - changes icon size to 0.8125rem (13px)
svg-icon--large - changes icon size to 1.5rem (24px)
svg-icon--x-large - changes icon size to 2rem (32px)
svg-icon--2x-large - changes icon size to 2.5rem (40px)
svg-icon--3x-large - changes icon size to 3rem (48px)
svg-icon--4x-large - changes icon size to 3.5rem (56px)
svg-icon--5x-large - changes icon size to 4.25rem (68px)

Modifiers for color:

svg-icon--accent - changes icon color to the contrast orange from our color palette
svg-icon--action - changes icon color to the default blue from our color palette
svg-icon--disabled - changes icon color to the x-light grey from our color palette
svg-icon--inverse - changes icon color to the white - for use on a dark background
svg-icon--error - changes icon color to default red from our color palette
svg-icon--success - changes icon color to default green from our color palette
svg-icon--caution - changes icon color to the contrast yellow from our color palette

svg-icon--solid - for icons with two different colors, sets the background fill color of the solid SVG icons to our default text grey and the inner icon path fill to white, using the default values set by the set-two-icon-colors mixin
svg-icon--solid-action - for icons with a solid (action) blue fill for the background and a white inner icon
svg-icon--solid-neutral - for icons with a light grey fill for the background and a white inner icon e.g. commonly used for the info icon
svg-icon--solid-error - for icons with a solid (error) red fill for the background and a white inner icon
svg-icon--solid-success - for icons with a solid (success) green fill for the background and a white inner icon
svg-icon--solid-caution - for icons with a solid (caution) contrast yellow fill for the background and a white inner icon

svg-icon--cutout - for use with solid icons that have a transparent core (inner icon) ie. the inner icon will show the colour from the background component or section that the icon lives in. Pair this class with one of the colour modifier classes (svg-icon--action) to change the main solid colour of the icon. N.B. This should only be used with solid icons.

Support and polyfills

Currently no versions of IE (and some older versions of WebKit browsers) supports the use syntax with external SVG sprite sheets (ie. file paths in use xlink:href=""), so we use svgxuse - a JS polyfill - as a workaround for IE. (However, you can reference symbols from an external file in Edge). We recommend this polyfill for referencing external SVGs in <use> elements. It works by detecting failed external refs and loading the referenced file via AJAX, injecting the sprite into the page itself and updating the xlink:href attribute to point to this resource instead. svgxuse polyfill usage instructions can be found here

Usage

Usage example

Icon library

#alert-triangle

#arrowhead-down

#arrowhead-left

#arrowhead-right

#arrowhead-up

#attach

#bank

#calendar

#chevron-down

#chevron-left

#chevron-right

#chevron-up

#clock

#copy

#cross

#cross-circle-outline

#cross-circle-solid

#delete

#download

#edit

#info-circle-outline

#info-circle-solid

#key

#menu

#minus

#minus-circle-outline

#minus-circle-solid

#new-window

#padlock

#padlock-solid

#pin

#play

#plus

#plus-circle-outline

#plus-circle-solid

#processing

#retry

#search

#tick

#tick-circle-outline

#tick-circle-solid

#trash

#upload

#phone

#facebook

#youtube

#twitter

#linkedin

Sizing modifiers

svg-icon--xsmall

svg-icon--small

default

svg-icon--large

Color modifiers

default

svg-icon--accent

svg-icon--disabled

svg-icon--action

svg-icon--inverse

svg-icon--error

svg-icon--success

svg-icon--caution

Solid icon color modifiers

svg-icon--solid-neutral

svg-icon--solid-action

svg-icon--solid-error

svg-icon--solid-success

svg-icon--solid-caution

Solid icon with cutout

svg-icon--cutout

svg-icon--cutout svg-icon--action

svg-icon--cutout svg-icon--error

svg-icon--cutout svg-icon--success

svg-icon--cutout svg-icon--caution

Icon alignment with accompanying text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<!-- Use the following example markup when the icon already has accompanying explanatory text or the icon only serves as decoration and provides no additional value  -->
<svg class="svg-icon" aria-hidden="true">
  <span>Close</span>
  <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
</svg>

<!-- Use the following example markup when using icons inside interactive elements, such as links or buttons -->
<a href="#" aria-label="close">
  <svg class="svg-icon">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
  </svg>
</a>

<!-- Use the following example markup when the icon is not inside an interactive element but the icon has a purpose and is not purely decorative -->
<svg class="svg-icon" role="img">
  <title>Close modal window</title>
  <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
</svg>