Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.
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.
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.
Icons are displayed in the following sizes in the user interface.
36 px
App launcher
20 px
Action bar
17 px
Tab
When choosing an icon for your own app or action:
MagnoliaIcons
font. Find an icon that represents your app or action well. To use a custom icon font:
icon-mycompanyname-shop-app
instead of icon-shop-app
.admincentral
theme. Your Vaadin theme should include admincentral
theme and it needs to compile it. See Using custom styles in your Magnolia app.