The 5.7 branch of Magnolia reached End-of-Life on December 31, 2023, as specified in our End-of-life policy. This means the 5.7 branch is no longer maintained or supported. Please upgrade to the latest Magnolia release. By upgrading, you will get the latest release of Magnolia featuring significant improvements to the author and developer experience. For a successful upgrade, please consult our Magnolia 6.2 documentation. If you need help, please contact info@magnolia-cms.com.
Icons add visual value to apps and actions. They help users instantly recognize user interface elements. Icons also add familiarity when used consistently across Magnolia.
Magnolia icon font
Icons used in Magnolia come from the pictographic MagnoliaIcons
font. Each icon is a character. The character is a vector format rather than a bitmap, which means you can style the icons with CSS and display them in various sizes without repeating the asset itself.
Icon sizes
Icons are displayed in the following sizes in the user interface.
36 px
App launcher
20 px
Action bar
17 px
Tab
Choosing an icon
When choosing an icon for your own app or action:
- Look through the icons provided in the
MagnoliaIcons
font. Find an icon that represents your app or action well. - Avoid icons that are already used. Using the same icon for two different purposes confuses users and leads to errors.
- If you create your own icons, adhere to the Magnolia design language.
Default icons
Using a custom icon font
To use a custom icon font:
- Create an icon font.
- Create a CSS file which references your custom font.
- In the CSS file, specify classes for your icons. Use a namespace that will prevent collision with Magnolia's native classes. For example
icon-mycompanyname-shop-app
instead oficon-shop-app
. - Configure a custom Vaadin theme that is different from the default
admincentral
theme. Your Vaadin theme should includeadmincentral
theme and it needs to compile it. See Using custom styles in your Magnolia app.