Icons

Standard Named CMS Icons

These declaratively named icons are always available in the base installation of the CMS core site and are designed to work with any standard icon collection distributed with the CMS. Additional classes can be added to an icon to make it look different; these ones are marked up with icon-larger.

File Type Icons

Numbers

Duotone Icons

A licence for Font Awesome Pro or another library that includes duotone support is required for duotone icons, and then they're easily implemented side by side with monotone icons.

Standard Social Icons

A licence for Font Awesome Pro or another library that includes the relevant brands is required for these social icons.

Manually Chosen Font Icons

Thousands of Icons are Included

In addition to the named CMS icons, with a little bit of HTML knowledge authors can place any icons available in the site's icon font file directly into a page. A few examples are below, and these are just from the free icons supplied with the CMS.

Icon Sizes

The size of an icon is relative to the element that it is attached to. For instance, an icon attached to a heading will be bigger than normal body text. The site designer can change these sizes but the CMS includes a useful standard approach.

Small - Half the text size.

Medium (Default) - Same as the text size.

Large - Double the text size.

Larger - Triple the text size.

Huge - 4.5x the text size.

Mega - 6x the text size.

Icons on Links and Buttons

Download Link

Download Button Secondary Button Small Button Large Button

   Button Element     Secondary Button 

Icon Layouts, Shapes, and Styles

Standalone Icons

Icons can be used on their own, but be careful about accessibility when you do this. Standard icon markup is not accessible out of the box, you'll need to do some work of your own.

Astronaut Meteor Otter Icons Icons

Icon Color

Icons can be colored with any of the theme's color and background color options, or the site designer can add new treatments.

Linked Icons

These examples show how icons behave when they are links.

Theme Colors

Generic Colors

Color Tints (Green Example)

Specialised Icon Treatments

Get your website designer to add specialised icon treatments to the standard library, it's easy!

< Meteor > |: Robot :| ~ Biohazard ~