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:
- With the app items on the Find bar search results list.
- In the first tab of every app.
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/.