Canvas

Canvas Transition: How Should I Use the Icons?

Reading Time: 4 minutes

You may remember that when designing a course in Moodle, there were limited options to affect the look and feel of a course. Canvas gives you more options and easier controls to use when designing the visuals in a course. When you use the course template provided by the CTL, you have access to an entire icon system Canvas designed. 

Why use icons? 

Icons provide visual interest on a page, and they can grab the reader’s attention. If icons are consistently used by a group, they create a common visual language – the user will recognize that items are tied together because the icon is used in multiple places. 

Let’s look at a quick example. Here are two screenshots from the Canvas course template. These are both of a page called a “module overview,” which is designed to be a one-stop shop for students each module. Students can open this page and see the objectives for the module as well as everything they’re required to complete that week (both content and assignments). 

Two screenshots of an overview page in Canvas. The left screenshot shows the page with icons, the right screenshot shows the page without icons.
Screenshots of the Module Overview page in Canvas with and without icons.

The three simple icons used on the left in the image above draw your attention to each of the headers and show they’re three distinct items (overview, content, assessments). They also brighten up the page with some color, as opposed to the strict black-and-white of the icon-less page on the right. 

Icons are also used across multiple assignments for a common purpose. In the template, we use the gear icon for the technical support sections in each assignment. Since the icon is used consistently, users can expect to find information about technical support everywhere the gear icon is used.

Screenshot of a Technical Support blurb in Canvas illustrating how the gear icon is used with each Tech Support blurb for consistency
Screenshot of a Technical support blurb in Canvas with the gear icon for consistency

How should I use the icons? 

Now that you’ve seen how useful icons can be in your course, let’s turn our attention to how we should be using them. Below is a glossary of the icons the CTL is consistently using in the template at the moment along with suggestions on how to use each. 

IconIcon use
puzzle iconCourse objectives, module objectives, module overview
gear iconTechnical Support – any place you’re linking to technical support (for Canvas, an external tool, etc.) for the students to access. 
book iconContent – any place that you’re assigning content for students to read or view
clipboard iconAssessments – any place where you have an overview of the assessments students need to complete or to indicate a list of various assignments
magnifying glass over paper iconAssignment overview – the most basic information about an assignment or the assignment prompt
flag iconGuidelines – more detailed information about the assignment or activity that’s the same across the course. For example, you might include how many words a discussion post should be or the time limit for a quiz here. 
speech bubbles iconPrompt – use in discussions to indicate the prompt the students are replying to. Separate out the information about the structure of their response and due dates into a “Guidelines” section. 
checklist iconQuiz Guidelines – use to indicate all of the information a student needs to know about taking a quiz (time limit, number of questions, number of attempts, etc)
circular arrows iconWrap-up – use to indicate a summary of information (reading guide-, module-, or course-level)
calendar iconLooking ahead – use to indicate a preview of upcoming assignments or content in your course

And for one final best practice for using icons: don’t use them in the place of any of your labels! Use the icons to enhance the structure you’re using in a course. 

Note: edited September 11, 2023, to remove the reference to Canvas Fellows. Those interested in the CTL template should contact the CTL directly at ctl@cedarville.edu.

Want to never miss a post? Subscribe here!

2 Comments

  • Andrew

    Lauren, I noticed these in our Canvas orientation and thought they made the pages look very polished. What do you believe is the easiest/best way to add these icons – embed as an image or manipulating the HTML? Did you create the icons used for CTL? Thanks!

    • Lauren Eissler

      Hi Andrew! The CTL is pushing out the template to each of the department sub-accounts today. CTL Fellows can access the template course and import content from it (this content includes the icons!). From there, you can embed the icons in your pages or assessments, using the “add image” button to navigate to the icons in your Canvas files and add them.

Leave a Reply