Overview
The MYOB icon set has many potential applications for you to use at your discretion. The icons utilise the SVG file format, allowing them to be scaled up or down without loss of quality.
Global
Global icons are usually associated with frequently performed user interactions for additional context. They should be used at the small size.
Interactive
Interactive icons are used to add additional context to frequently performed user interactions. They should be used at the medium size.
Content
Content icons are used in conjunction with other components to provide emphasis. They are frequently used within the proof point. They should be used at the large size.
Colours
Use any of these select colours to quickly change the foreground colour of any icon. For more information about MYOB's colour palette, please visit colours.
Gradient
Regal #6100a5
Storm 100 #2e3e4f
Storm 50 #969ea7
White #ffffff
Usage guidelines
| Dos | Donts |
|---|---|
 Do use the correct icon that best supports the content or desired user interaction.
|
 Don't use too many icons in a busy way that distracts from the content.
|
|
Don't use the gradient colour variation on more than a few icons in one screen. It can become distracting.
|
Implementation guidelines
| Name | Class | Description |
|---|---|---|
| Extra extra small |
.icon--xxs
|
Rarely used. Usually associated with frequently performed user interactions for additional context. |
| Extra small |
.icon--xs
|
Rarely used. Usually associated with frequently performed user interactions for additional context. |
| Small |
.icon--sm
|
Preferred size for Global icons. Sometimes animated. Found in components such as the accordion. |
| Medium |
.icon--md
|
Preferred size for Interactive and CTA icons. Usually associated with frequently performed user interactions for additional context. |
| Large |
.icon--lg
|
Preferred size for Content icons. Used mainly with components such as the proof point. |
| Extra large |
.icon--xl
|
Additional size for Content icons. Used mainly with components such as the proof point. |
| Extra extra large |
.icon--xx
|
Additional size for Content icons. Used mainly with components such as the proof point. |