← VCE Spreadsheets, SQL & Visualisation

Using images and icons in a visualisation

A small simple picture that makes a topic quick to recognise. Keep icons relevant and in one style, use them only where they help the data, and credit or get permission for any you borrow.

Part of: VCE Applied Computing - U1O1 - Data analysis — Module 85, VCE Data Analytics - U3O1 - Data Analytics — Module 122, VCE Data Analytics - U3O2 - Analysis and Design — Module 130, VCE Data Analytics - U4O1 - Development and Evaluation — Module 71, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 143

Understanding Using images and icons in a visualisation in VCE Spreadsheets, SQL & Visualisation

What it does: Both icons use the same flat style, so the visualisation looks consistent and professional. The person icon matches the figure about students, so it helps the viewer see the topic at a glance. Images found online are often protected by copyright. Check the licence, get permission where required and credit the creator. Icons placed beside key figures help people recognise the topic quickly. They must not cover or overpower the data itself. An img tag with a relevant icon and alt text shows how an icon sits beside a key figure and supports the data.

Common mistakes: The other icons are flat style, but this one is a 3D icon. Icons should share one style, so it should use a flat icon such as stock-flat.svg. The opening tag is missing its closing >, so it should be <figure>. Without it the figure with the credit line is not valid HTML.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Using images and icons in a visualisation to a class →

This module's key terms are also in a printable crossword (Modules 71–86) and word search (Modules 55–86).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

A dashboard shows school canteen sales. Which icon choice best supports the data?

A small sandwich icon beside the sandwich sales figureA large random cartoon dog icon beside the sandwich sales figure

Matches

↓

The icons mix different styles (cartoon, flat and 3D), so the visualisation looks inconsistent. Use one icon style throughout.

Applying

Meanings

Term

icon

Meaning

A small simple picture that makes a topic quick to recognise. Keep icons relevant and in one style, use them only where they help the data, and credit or get permission for any you borrow.

Practice

Testing

Gaps

Check Answer

Spots

3<img src="users-flat.svg">

4<img src="stock-3d.png">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A dashboard shows school canteen sales. Which icon choice best supports the data?

A. A small sandwich icon beside the sandwich sales figure ✓

B. A large random cartoon dog icon beside the sandwich sales figure

Icons should be relevant to the data. A sandwich icon makes the figure quick to recognise, but an unrelated dog adds clutter and confuses the viewer.

2. Which set of icons follows good practice for a visualisation about school sport participation?

A. One flat line icon, one 3D cartoon icon and one photo-style icon

B. All icons are flat, single-colour line drawings ✓

Using one icon style throughout keeps the visualisation consistent and professional. Mixing styles looks messy and distracts from the data.

3. You find a great icon on a website. What should you do before using it in your assignment?

A. Use it straight away because it is on the internet, so it must be free

B. Check the licence, get permission if needed and credit the source ✓

Images found online are often protected by copyright. Check the licence, get permission where required and credit the creator.

4. True or false: Adding an icon to every single label, title and bullet point will always improve a visualisation.

A. False - use icons only where they help the data ✓

B. True - more icons always make the data clearer

Too many icons create clutter. Use them only where they help the viewer recognise a topic or key figure quickly.

5. Which is the better way to use an icon with a key figure such as '1,250 students'?

A. Place a small student icon beside the number ✓

B. Place a big icon over the number so it is hard to read

Icons placed beside key figures help people recognise the topic quickly. They must not cover or overpower the data itself.

Match the Pairs

<img src="bus.svg" alt="Bus icon"> → Places an icon beside a figure, such as bus use, so the topic is quick to recognise

<p>Icons by Sam Lee, used with permission</p> → Gives credit and shows permission for borrowed images

Use one icon style throughout so the visualisation looks consistent → <img src="car-flat.svg"> <img src="bike-flat.svg">

Place a relevant icon beside a key figure so the topic is quick to recognise → <img src="person.svg" alt="Person"> <b>1200 students</b>

<img src="cartoon-dog.png"> <img src="flat-cat.svg"> <img src="3d-bird.jpg"> → The icons mix different styles (cartoon, flat and 3D), so the visualisation looks inconsistent. Use one icon style throughout.

<img src="pizza.png"> <b>Bus use: 85%</b> → The pizza icon is not relevant to bus use, so it does not help the data. Use a bus icon or no icon.

Key Term

icon

A small simple picture that makes a topic quick to recognise. Keep icons relevant and in one style, use them only where they help the data, and credit or get permission for any you borrow.

Fill in the Blanks

1. <p><img src="bus.svg" class="icon"> 42%</p>

Hint: Type the HTML tag that places a small picture beside the key figure.

2. <img src="bus.svg" class="icon"> <img src="train.svg" class="icon">

Hint: Type the class name that matches the line above so both icons share one style.

3. .icon { width: 32px; height: 32px; }

Hint: Type the CSS property that keeps every icon the same size as its width.

4. <figure> <img src="bus.svg" alt="Bus icon"> <figcaption>Icon: Sam Lee</figcaption>

Hint: Type the tag name used to add a credit caption under an image.

5. <p>Icon by Sam Lee, used with permission.</p>

Hint: Type the word for the owner's approval you need before borrowing an image.

Spot the Error

Question 1

A

B <img src="cart-flat.svg">

C <img src="users-flat.svg">

D <img src="stock-3d.png">

Line D — The other icons are flat style, but this one is a 3D icon. Icons should share one style, so it should use a flat icon such as stock-flat.svg.

Question 2

A <figure

B <img src="map.jpg">

C <small>Credit: ABS</small>

D </figure>

Line A — The opening tag is missing its closing >, so it should be <figure>. Without it the figure with the credit line is not valid HTML.

Question 3

A <div class="stat">

B <h2>42 mm</h2>

C <img src="pizza.svg">

D <p>Rainfall</p>

Line C — A pizza icon has nothing to do with rainfall. The icon beside a key figure must be relevant, so it should be something like raindrop.svg.

Question 4

A <div class="stat">

B <h2>1,250 riders</h2>

C <img scr="bike.svg">

D </div>

Line C — The attribute is misspelled as scr. It must be src so the browser can load the icon file.

Question 5

A <div class="stat">

B <img src="ev.svg" alt="EV>

C <h2>8,400</h2>

D <p>EVs counted</p>

E </div>

Line B — The alt text is missing its closing quote. It should be alt="EV" so the icon has a description for screen readers.

Student with a class code? Join your class →