Icon Generator for Moodle

Build accessible inline icons for Moodle with editable colours and labels.
Learn how this tool works | Question? Email teaching@cambriancollege.ca

Icon

Label Text

Icon Tone (black/white)

For Moodle reliability, icons are coloured with filter: invert(0/1) from a white SVG.

Text Element

Background Bubble

Any valid hex. The icon colour is set to black/white for maximum contrast. Ensure your hex code starts with #.

Match text colour to bubble?

Preview

Sample Heading

Accessibility Checks

Icon vs bubble: —

Text vs page background: —

Rules: non‑text contrast ≥ 3.0:1 (icon vs bubble).
Body text contrast target ≥ 4.5:1 vs white page.

Icon Block Code

How this tool works

Select an icon – choose from the available SVG icons or provide your own link.
Customize the label – add short, descriptive text that appears beside your icon.
Set your colours – pick a bubble colour and, if needed, adjust the text colour for readability.
Check accessibility – review the AODA contrast indicator to confirm your colour choices meet accessibility guidelines.
Preview and copy – view your finished icon, then copy the generated HTML snippet for use in Moodle.

Watch the video below for a quick walkthrough of these steps:

Behind the scenes, the generator builds your icon by combining a few simple elements:

Each icon is an external SVG image, loaded using a standard <img> tag for full Moodle compatibility.
All colours, spacing, and typography are applied with inline styles so the icon looks consistent wherever it's pasted.
The accessibility checker compares your chosen colours against WCAG contrast standards and displays a pass or fail result.
When you copy the snippet, the tool outputs fully self-contained HTML — no extra CSS or scripts required.