Information

Icons are an essential part of many user interfaces, visually expressing objects, actions and ideas. They are distinctive and instantly recognizable and can be used across a wide range of elements.

There are a total of 3 different states for each of the icon. These include:

• Large
• Medium
• Small

The examples below that display the states are mainly for content authors to visualize and understand. Each icon structure between the themes are the same with the only difference being the classes that are set upon the <span> elements.

Icons can be customized by assigning the relevant class to the element according to the following schema:

The class theme2 MUST be assigned to the root element .row to enable the selectable component.

Visual Example

The main class for this layout is: .mericon-xlg

Visual Example

The main class for this layout is: .mericon-xmd/i>