Moodle icons
| Complete overhaul of all standard icons in core | |
|---|---|
| Project state | Completed |
| Tracker issue | MDL-34080 |
| Discussion | New default icon set for Moodle 2.4 roadmap |
| Assignee | Barbara Ramiro and Frédéric Massart |
Moodle 2.4
The default icons were updated for Moodle 2.4. Not only are the icons a little bigger and more colourful but they are SVG format and support full scaling on all devices, so they always look good.
For font-awesome icons in Moodle 3.3 and later, see the relevant section below.
Summary of changes
To make your activity modules look good, you need to upgrade your icons by adding some SVG files. Use the following design guidelines to produce an icon that plays well with the core ones.
- Icon format: SVG preferred and PNG version for fallback
- Activity icons: Increased in size from 16x16 to 24x24 px colour
- Action icons: Standardized from various sizes to 12x12 px monochrome
- All other icons: Standardized from various sizes to 16x16 px monochrome
Objectives
- Universal design - commonly used
- Distinctive shape and form for its function or purpose
- Works well on light and dark background
- Scalable for multiple screen resolutions
Format
- Plugin icons: gradient colour, 16x16 px canvas, output 16x16 px. Except for:
- Activity icons: gradient colour, 24x24 px canvas, output 24x24 px
- Action icons: monochrome, 12x12 px canvas, output 12x12 px. Except for:
- Toolbar icons: monochrome, 16x16 px canvas, output 16x16 px
- Dropdown icons: monochrome, 16x16 px canvas, output 16x16 px
- Display icons: monochrome, 16x16 px canvas, output 16x16 px
- SVG (Scalable Vector Graphics) and PNG version in different sizes (12px, 16, 24) for unsupported browsers in 72ppi
Style
- Flat perspective
- Not too much details on small resolutions
- Not too few details on higher resolutions
- Consider space and proportion
- Source of light: 90 degrees
- Sharp
- Consistent curvature on rounded corners
- Lighting and gradients should have consistent amount and direction
Activity icons
Properties
- Outline: Outer border - dark gradient
- Highlight: inner border - light gradient
- Body - Gradient
Effects on same colour background
- With highlight, it stands out from the background
- Without highlight it blends into the background
Samples
Gradient colour palette
- Column 1: Outer outline (top to bottom)
- Column 2: Inner outline - highlight (top to bottom)
- Column 3: Body (top to bottom)
The palette in a file format suitable for Inkscape can be downloaded from [1]
Action and Display Icons
Dimensions
- Action icons: canvas 12x12px - output 12x12 px
- Toolbar icons: canvas 16x16px - output 16x16 px
- Dropdown icons: canvas 16x16px - output 16x16 px
- Display icons: canvas 16x16px - output 16x16 px
Style
- Simple (not too detailed)
- Flat
- Smooth curves
- Fill entire dimension (rotate to 45 deg for thin shapes)
- Single layer
Colour
- #999999 (r:153 g:153 b:153)
Samples
SVG settings (Illustrator)
- SVG Profile: SVG 1.1
- Font Subsetting: None (use system fonts)
- Image Location: Embed Images
- CSS Property: Style attributes
- Font Type: SVG
- Encoding: UTF-8
- Not compressed (compressed creates svgz and becomes unusable)
- Vector data precision: 1 decimal
- Use illustrator effects rather than Photoshop effects (to make it vector rather than raster)
- Add effect layer rather than direct on the object for easy editing
Illustrator files:
- 24px activity icons.ai (544 KB)
- 16px icons.ai (1.42 MB)
- 12px icons.ai (1.33 MB)
General recommendations
Make it easy for designers to edit the SVG file in image editor and for themers to edit it in the text editor:
- Use as few vector points as possible (no unnecessary points)
- If possible, use basic shapes and the pathfinder tools instead of the pen tool
- Clean layers: remove unnecessary or unused layers. Group and name it accordingly
- Use effects that allows roundtrip without rasterization (meaning it should not render raster from svg to illustrator to svg)
- Use grids: 12, 16 and 24
Font awesome icons
Moodle 3.3 Moodle 3.3 comes with built in support for Fontawesome icons. This is an icon font with over 470 different icons to choose from. Some advantages of using Fontawesome are, fewer http requests, sharper scaling, color can be adjusted with CSS etc. Font awesome must be supported by the theme in order for it to have an effect. This means the theme must specify:
theme/example/config.php
$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;
The value of this config is a class name that extends the abstract class "\core\output\icon_system". This means it is possible to create a new / different implementation of an icon system entirely in a theme (like inline svg). Creating a new icon system is only recommended for advanced devs because you need to implement the mustache handlers for javascript as well as the php class. The icon_system_fontawesome is a working example to base other implementations on.
When using the font-awesome icon system, Moodle will look for a mapping between regular icons and font-awesome ones every time it renders an icon. This is done by plugin authors who implement a COMPONENTNAME_get_fontawesome_icon_map() callback in their plugin to map all their own custom icons to ones from font-awesome:
mod/forum/lib.php
/**
* Get icon mapping for font-awesome.
*/
function mod_forum_get_fontawesome_icon_map() {
return [
'mod_forum:i/pinned' => 'fa-map-pin',
'mod_forum:t/selected' => 'fa-check',
'mod_forum:t/subscribed' => 'fa-envelope-o',
'mod_forum:t/unsubscribed' => 'fa-envelope-open-o',
];
}
Questions:
Does this work for {{#pix}} tags in mustache templates?
YES!
Does this work for {{#pix}} tags in mustache templates rendered in Javascript?
YES!
Does this work for code directly creating image tags with pix_url() ?
No - change your code to use a full pix_icon renderer! Icons do not even have urls any more.
How do I update my old javascript that manually builds image tags?
Call renderPix from the core/templates amd module - it will build you a full chunk of icon HTML.
How do I find a suitable font-awesome icon?
Try: http://fontawesome.io/icons/
How do I get a new icon created?
http://fontawesome.io/community/#requesting-new-icons
What about icons that should really always be images (like activity icons)?
Use $OUTPUT->image_icon() instead of $OUTPUT->pix_icon() (or $OUTPUT->image_url() instead of $OUTPUT->pix_url()).
