Marks are graphic shapes like squares, circles and geometric or abstract forms. They don't have specific meaning by themselves, but we can give them significance by using them in a specific way, such as a callout box used for a particular purpose. Marks can also be combined to give them new significance, as might be done in a logo. The following example of a Mark can be seen below.

Icons are simple graphic representations designed to express the essential visual characteristic of things and ideas in order to communicate or inform in a direct and universally recognizable way. An icon will tend to depict what it represents, such as an outline of a computer monitor. The following example of an Icon can be seen below.

Symbols represent a concept or an idea, such as a four-leaf clover for good luck or the Block U logo to represent the University of Utah community. One way to differentiate an icon from a symbol is that a symbol tends to have a culturally assigned meaning. The following example of a Symbol can be seen below.

Emojis started as the humble emoticon (punctuation marks, letters and numbers used to create pictorial icons that generally display an emotion or sentiment) but have grown beyond showing emotion and are often associated with text messaging. The following example of an Emoji can be seen below.

Graphics are basic design elements, such as geometric shapes, arrows, abstract shapes, or lines. Simple graphics can be combined to create more complex shapes or patterns, but graphics are not narrative elements. A graphic may also contain text, but text by itself is not considered a graphic unless it is done in a stylized fashion. The following example of a Graphic can be seen below.

Illustrations are more complex than graphics and provide a narrative, capture multiple ideas or tell a story. The following example of an Illustration can be seen below.

Images are typically a captured real-life image, such as with photography or a photographic process. The following example of an Image can be seen below.

When might you need to consider using different types of visuals? Are you trying to draw attention to something on a page or throughout a course? Explain an idea or concept? Color, size, and complexity often help determine the best visual for the purpose. The larger and more complex, the more likely you should be using an illustration, graphic, or image.

It is a good practice to search your sources or search online to see

• how others have used symbolic design elements to explain a concept or idea;
• whether there are symbolic design elements that already have a culturally assigned meaning for the idea you would like to represent;
• if the symbolic design element has a name associated with it (which may be read by a screen reader) or
• if the symbolic design element has a meaning associated with it that may cause confusion for students or is different than your intention.

Use standard symbolic design elements whenever possible.

Once you have decided on your symbolic design element, be consistent and strategic in its use throughout your course. Also, be aware of visual clutter and don't overuse visuals (especially icons) as this can be distracting or even confusing to students—if everything is important, then nothing is important.

Be sure to model good accessibility practices, such as including meaningful text along with your icons or alt-text with images (alt=" " if the image is decorative) and using good color contrast. Also, view your symbolic design element in mobile views so you know how they will display on your pages when viewed with a mobile device.