Style Guide


Style Guide


Icons can be a great way to communicate to the viewer. People of all ages, nationalities, and education levels gleam meaning from good iconography; often times without even realising it. A well designed interface should communicate to everyone, and icons help us achieve this.

Google Material Icons

Material Icons is a fantastic suite of icons from Google, made available to the public for free. It's tried and tested, a backbone of the Material Design ecosystem, and found on Android phones around the world. It comes with a number of different themes, but we'll be making use of the rounded variety, as it complements our typeface quite nicely.

Icon samples

Some sample icons from the rounded theme

Themes were only introduced recently (as of June 2018), so we can't access them through the more convenient web fonts just yet. If you'd like to make use of these icons, please use SVG.


Please adhere to the following guidelines when using icons on the NCMG website.

  1. Icons should complement, not supplement. Place icons beside interactive elements for visual grepping, rather than replacing them.

  2. Deemphasize icons. The text beside them should stand out. Particularly when the icon you're using has more weight than its text.