Legacy Icons

Canvas includes a legacy icon set that can be used inside course content by applying icon classes such as icon-info, icon-warning, or icon-checkto an inline element. These icons are provided by Canvas' own CSS and icon font; you do not need to upload images to use them.

The examples on this page show how to use Canvas icons alongside text in an accessible way. A full reference list of available icon classes is provided on the Full Legacy Icons Reference page.

Useful references

• MDN — aria-hidden (hiding decorative icons from screen readers)
• MDN — role="img" and labelling icons
• W3C WAI — Images concepts (icons, decorative images, and text alternatives)

Basic icon usage

To display a Canvas icon, add the appropriate icon class to an inline element such as <i> or <span>. In Canvas' own styles, icons are usually treated as decorative and hidden from screen readers using aria-hidden="true".

Icons should almost always be accompanied by visible text so that all learners can understand their meaning, even if the icon does not load or is not recognised.

<p>
  <i class="icon-info" aria-hidden="true"></i>
  <strong>Information:</strong> Submissions are due by Friday at 17:00.
</p>

<p>
  <i class="icon-warning" aria-hidden="true"></i>
  <strong>Warning:</strong> Late work may receive a reduced mark.
</p>

<p>
  <i class="icon-check" aria-hidden="true"></i>
  <strong>Completed:</strong> You have already submitted this assignment.
</p>

Icons with extra meaning

If an icon is conveying information that is not already present in the visible text, you should include an accessible label. In most cases it is simpler to include this label as visible text next to the icon. If you must rely on the icon alone, use role="img" with an aria-label:

<p>
  <i class="icon-warning" role="img" aria-label="Important update"></i>
  <strong>Important:</strong> The deadline for this activity has changed.
</p>

In many cases you can avoid extra ARIA by simply including clear visible text next to a decorative icon and hiding the icon from assistive technology using aria-hidden="true".

Purely decorative icons

When an icon is purely decorative (for example, a star next to a heading or a small arrow indicating movement), it should be hidden from screen readers. This prevents noisy or confusing announcements.

<p>
  <i class="icon-star-light" aria-hidden="true"></i>
  Recommended reading for this week.
</p>

<p>
  <i class="icon-arrow-right" aria-hidden="true"></i>
  Proceed to the next activity.
</p>

Accessibility notes

• Do not rely on colour or icon shape as the only way of communicating meaning. Always include clear text descriptions.
• Use aria-hidden="true" on purely decorative icons so they are ignored by screen readers.
• If an icon itself carries meaning and there is no visible text explaining it, provide an accessible name using aria-label and (optionally) role="img".
• Remember that these icons are part of Canvas' legacy styling. They may change appearance if Canvas updates its icon font or removes certain classes.

For critical information (for example, assessment rules, safety warnings, or key dates), the text must always stand on its own, even if icons or styling are not available.