Utility Icons

Icons

Icon CSS classes

To render an icon anywhere in the page, mix the icon block with the glyph’s named block. The named blocks follow the format icon-core-name, and each glyphs name can be found in the “Icons“ section above.

Basic icon example

This is the “Caret (down)” icon

<i class="icon icon-core-caret-down"></i>
This is the "Caret (down)" icon

Color modifiers

The default icon display is the default text colour (shark). Modifier classes make it possible to style icons differently.

• --primary colors an icon green to indicate a primary action
• --secondary colors an icon purple to indicate a secondary action
• --disabled colors an icon grey to indicate the action is turned off
• --error colors an icon red to indicate a problem

Examples of icons with modified colors

<i class="icon icon-core-caret-down icon--primary"></i>
<i class="icon icon-core-caret-down icon--secondary"></i>
<i class="icon icon-core-caret-down icon--disabled"></i>
<i class="icon icon-core-caret-down icon--error"></i>

1. Color has special meaning for instructive icons. By default, each one is styled with its intended color. For example, “checkmark” is green, and “alert” is red without requiring any modifier.

Fixed width modifier

The TELUS Core Icons font isn’t fixed width, but the --fw helper can be used when you need to align glyphs vertically.

Example of fixed width icons

Hamburger
Chevron

<i class="icon icon-core-hamburger icon--fw"></i> Hamburger<br>
<i class="icon icon-core-chevron icon--fw"></i> Chevron

SCSS variables and mixins

In order to use variables, functions, and mixins, TDS’ SCSS source code must be imported by your project. See the Using TDS Core for further instructions.

Core Icon Codepoint

Function core-icon-codepoint returns the unicode value for the given icon name.

.my-block {
  &::before {
    content: core-icon-codepoint(chevron);
  }
}

Core Icon

Mixin core-icon outputs the properties of an inline block icon.

This mixin has one optional parameter - the name of an icon. If this parameter is given, your block will have ::before pseudo element containing that glyph.

.my-custom-chevron {
  @include core-icon(chevron);
}

.my-generic-icon-block {
  @include core-icon;
}

Variables

Accessibility

Icons are a helpful tool to supplement information, but should not be the only means by which you communicate something. The .accessible-hide class is one way to include helpful text along with an icon.

Accessible icon example

Enter a keyword, then click the search button to find relevant results.

<p>
    Enter a keyword, then click
    <i class="icon icon-core-spyglass">
    <span class="accessible-hide">the search button</span>
    </i>
    to find relevant results.
</p>

That content will be read aloud by a screen reader as “enter a keyword, then click the search button to find relevant results”. Without the helper text, it would be heard as “enter a keyword then click to find relevant results”, which is not as clear.