Building Roadmaps with Canvas Icons

by Kristina Wilson

Are the students in your online class unsure how to approach the week’s tasks? There are many solutions, and I’ve seen everything from built-in LMS features like completion tracking to printable checklists.

One particularly elegant addition to an online course is the roadmap.

Learning Designer Jessica Mansbach discussed the benefits that roadmaps can afford in her October 2015 blog post How to Keep Students from Getting Lost in Your Course. They are useful to both students and instructors. “[Students] can more easily make sense of how to proceed through the course and how to use the course resources,” she explains, but it also “helps you to design your course in a more strategic way, because you take the time to set a final destination for your students in the form of clear course learning goals.”

Roadmap Best Practices

Begin each roadmap item with an verb; think “Read Chapter 7” or “Participate in the Module 3 discussion” instead of “Chapter 7” or “Module 3 discussion.” Students have a clear activity to pursue, and are able to see what tasks they will be asked at a glance. Still, try to keep it short and sweet: students might miss part of a directive if it’s nested in a few others.

Don’t forget to include small tasks in your roadmaps. Some weeks, students may need to meet as a group, respond to their peers in a discussion, or begin working on an extended project, and there are no clear Canvas-item equivalents for these tasks. The roadmap is a great place to remind and prompt students about these formative activities.

Link roadmap items to a place where students can take action. A prompt to read a journal article might link to a list of the course readings or the Course Reserves. A prompt to respond to peers in discussion might link to the discussion in question.

Why Use Icons?

Icons provide a polished, consistent look. Students can summarize the week’s tasks at a glance.

There’s no image management. When you use the built-in Canvas icons, it’s a simple matter of adding the icon name to the code of your link. Think of the time you’ll save compared to the old way: searching high and low to find the perfect icon, cropping it and changing the resolution in Photoshop, hosting it in the course files, embedding it in the page, providing alt-text, and messing around with the page formatting until the icon is well-aligned.

This technique is accessibility-compliant. Icons are ultimately decorative and supplemental. Because these are built in to the code and not separate images, they won’t waste the time of students using screen readers. (Imagine hearing “Canvas discussion icon” spoken before each of the week’s three discussion assignments.) Provided that you create a descriptive link–“Complete the Module 7 White Paper assignment” as opposed to “Module 7 assignment”–students who are using screen readers will be able to use your roadmap with ease.


This roadmap technique was used in the Spring revision of MHI 405: HIT Integration, Interoperability, and Standards. Each module begins with a clear presentation of module-level objectives and weekly tasks.

Course objectives and weekly task list, including icons for each task.

How to Implement Icons

    1. Compose the text for the link and highlight it.
    2. Create a link to existing course materials by clicking on the desired item or area in the right menu, Insert Content into the Page.
    3. View the link using the HTML Editor.Screenshot with the links for steps one, two, and three highlighted.
    4. Choose the desired icon name from the table and enter it into the link’s class field in the HTML Editor.
      1. Commonly Used Icons3-commonlyusedicons
      2. Animation locating link and entering icon name in the HTML Editor. There are 5 seconds between each frame.
    5. Save and view published page to confirm application. The icon will not display in the Rich Content Editor.

Additional help

For guidance building roadmaps with Canvas icons, please contact Learning Designer Krissy Wilson or any member of the Instructional Technology team.