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.
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.
Font-based and image-based icons
In Magnolia 6.x, the icons used come in two forms:
- As font characters from the pictographic
- As SVG (Scalable Vector Graphics) images.
The font-based icons are 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.
The image-based icons are used:
- In the App launcher.
- With the app items on the Find bar search results list.
- In the first tab of every app.
If you are developing a custom content app, you can also provide and use custom SVG icons in it. See the How to add SVG icons for apps page for more details.
Icons are displayed in the following sizes in the user interface.
Search results list
* Depending on the viewport size.
To see the SVG image-based icons, please follow this hyperlink: https://dev.magnolia-cms.com/svg-app-icons-gallery/.