Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle icons

From MoodleDocs
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

design-activity-icon.png

Effects on same colour background

  • With highlight, it stands out from the background
  • Without highlight it blends into the background

design-activity-icon-effects.png

Samples

design-activity-icon-samples.png

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]

design-activity-icon-palette.png

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

design-action-block-icon-samples.png

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:

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()).

See also