This documentation is still in progress. We are working hard to update all our screenshots to the new Magnolia 6 style. Please bear with us.
This page explains how you can provide and use custom SVG icons for apps.
Every Magnolia app has an icon assigned to it. The icon can be defined in the app descriptor with the
Where the icon is displayed
It is displayed:
- In the App launcher:
- In the tab name of the first subapp:
- In the Find Bar search result list, when the result type is an app:
Currently, there is a bug always showing the fallback icon in the result list instead of a custom icon. ( MGNLUI-4920 - Getting issue details... STATUS )
Providing and referencing a custom icon
To use a custom icon for an app, you must:
- Provide an SVG file in a Maven module which is included in your webapp bundle.
The SVG file must be located in the
- Reference the icon in the app descriptor by setting the property
icon. Its value must be the filename without the
In your Maven module, add the
fast-vehicle-icon.svgfile to the
Make sure to add
my-foobar-moduleto your webapp bundle.
Reference the icon from the app descriptor of your custom app:
Reusing app icons from the UI framework
Instead of using a custom app icon, you can also reference and use app icons that are part of the UI Framework, see their names in the Magnolia app icons gallery.
Default and fallback icons
If you do not specify the
icon property in the app descriptor, the system uses the
icon-app image as the default icon.
If you reference an SVG image which does not exist, the system uses the
icon-app character from the Magnolia icon font as the fallback icon.