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.

In Magnolia 6.0+, you can not use icons for apps in app launcher anymore. Instead, an app icon must be a file in the SVG image format

See the How to add SVG icons for apps page for more details. 


Font-based and image-based icons

In Magnolia 6.x, the icons used come in two forms:

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.

Icon sizes

Icons are displayed in the following sizes in the user interface.

15 px

Search results list

20/30/35 px*

App launcher

* Depending on the viewport size.



16 px

Action bar

20 px

Tab

Image icons

To see the SVG image-based icons, please follow this hyperlink: https://dev.magnolia-cms.com/svg-app-icons-gallery/.

Font icons

 

icon-appslauncher

 

icon-pulse

 

icon-favorites

 

icon-rssfeed

 

icon-webpages-app

 

icon-assets-app

 

icon-documents-app

 

icon-news

 

icon-people

 

icon-companies

 

icon-items

 

icon-files

 

icon-contents

 

icon-content-app

 

icon-configuration-app

 

icon-security-app

 

icon-jcr-app

 

icon-logging-app

 

icon-audit-app

 

icon-import-export-app

 

icon-language-app

 

icon-packager-app

 

icon-backup-app

 

icon-folder

 

icon-file

 

icon-file-text

 

icon-file-word

 

icon-file-excel

 

icon-file-powerpoint

 

icon-file-pdf

 

icon-file-webpage

 

icon-file-image

 

icon-file-video

 

icon-file-audio

 

icon-content-item

 

icon-work-item

 

icon-user-me

 

icon-user-anyone

 

icon-user-magnolia

 

icon-user-system

 

icon-user-public

 

icon-user-group

 

icon-user-role

 

icon-node-folder

 

icon-node-content

 

icon-node-data

 

icon-action

 

icon-switch-preview

 

icon-switch-edit

 

icon-switch-review

 

icon-open-fullscreen

 

icon-close-fullscreen

 

icon-show-changes

 

icon-hide-changes

 

icon-add-file

 

icon-add-folder

 

icon-delete

 

icon-edit

 

icon-move

 

icon-view

 

icon-copy

 

icon-paste

 

icon-duplicate

 

icon-publish

 

icon-publish-incl-sub

 

icon-unpublish

 

icon-mark

 

icon-unmark

 

icon-share

 

icon-add-node-content

 

icon-add-node-data

 

icon-undo

 

icon-redo

 

icon-add-fav

 

icon-remove-fav

 

icon-import

 

icon-export

 

icon-upload

 

icon-download

 

icon-open-new-window

 

icon-view-tree

 

icon-view-list

 

icon-view-thumbnails

 

icon-search

 

icon-arrow1_e

 

icon-arrow1_n

 

icon-arrow1_s

 

icon-arrow1_w

 

icon-slider-handle

 

icon-slider-max

 

icon-slider-min

 

icon-slider-rail

 

icon-arrow2_e

 

icon-arrow2_n

 

icon-arrow2_s

 

icon-arrow2_w

 

icon-confirm-tick

 

icon-confirm

 

icon-error-mark

 

icon-error

 

icon-warning-mark

 

icon-warning

 

icon-info_mark

 

icon-info

 

icon-help-mark

 

icon-help

 

icon-checkbox_fill

 

icon-checkbox_outline

 

icon-checkbox_tick

 

icon-radio_fill

 

icon-radio_outline

 

icon-radio_dot

 

icon-datepicker

 

icon-trash

 

icon-wizard-step

 

icon-open-fullscreen-2

 

icon-close-fullscreen-2

 

icon-spinner-1

 

icon-spinner-2

 

icon-spinner-3

 

icon-spinner-4

 

icon-spinner-5

 

icon-spinner-6

 

icon-spinner-7

 

icon-spinner-8

 

icon-spinner-full

 

icon-notification-badge-plus

 

icon-notification-badge

 

icon-tick

 

icon-close

 

icon-app

 

icon-instant_preview

 

icon-development-app

 

icon-add-item

 

icon-articles-app

 

icon-forums

 

icon-asset-pool

 

icon-folder-l

 

icon-node-folder-l

 

icon-edit-wo

 

icon-crop-image

 

icon-rotate-image-cw

 

icon-rotate-image-ccw

 

icon-flip-horizontally

 

icon-flip-vertically

 

icon-zoom-to-fit

 

icon-fit-canvas

 

icon-view-in-actual-size

 

icon-cache-app

 

icon-server-config-info

 

icon-reserve

 

icon-status-green

 

icon-status-orange

 

icon-status-red

 

icon-categories

 

icon-tag

 

icon-tags

 

icon-delete-search

 

icon-select

 

icon-show-versions

 

icon-compare-versions

 

icon-retrieve-versions

 

icon-read-only

 

icon-lock

 

icon-unlock

 

icon-forums-app

 

icon-forums-thread

 

icon-forums-article

 

icon-message-app

 

icon-message

 

icon-mail-setting

 

icon-content-translation-app

 

icon-error-l

 

icon-warning-l

 

icon-info-l

 

icon-help-l

 

icon-segments-app

 

icon-segmentation

 

icon-add-segmentation

 

icon-segment

 

icon-add-segment

 

icon-personas-app

 

icon-persona

 

icon-add-persona

 

icon-preview-app

 

icon-has-variants

 

icon-create-variants

 

icon-choose-audience

 

icon-link

 

icon-link-page

 

icon-link-document

 

icon-link-assets

 

icon-link-image

 

icon-unlink

 

icon-shape-circle-plus

 

icon-shape-circle

 

icon-shape-triangle-plus

 

icon-shape-triangle

 

icon-tag-2-app

 

icon-tag-2

 

icon-add-tag-2

 

icon-target-app

 

icon-target

 

icon-add-target

 

icon-sitemaps-app

 

icon-sitemaps

 

icon-add-sitemaps

 

icon-collapse-header

 

icon-extend-header

 

icon-external-webpage

 

icon-arrow-link

 

icon-play-button

 

icon-story-button

 

icon-i-beacon

 

icon-open-node

 

icon-close-node

 

icon-resource-files-app

 

icon-configuration-files-app

 

icon-web-resources-app

 

icon-rft-template

 

icon-rft-configuration-file

 

icon-rft-web-resource

 

icon-from-jcr

 

icon-from-fs

 

icon-from-classpath

 

icon-definitions-app

 

icon-dt-generic-definition

 

icon-dt-subapp-definition

 

icon-dt-template-definition

 

icon-dt-dialog-definition

 

icon-dt-form-definition

 

icon-dt-form-field-definition

 

icon-cut

 

icon-marker

 

icon-leaf-node

 

icon-reference-node

 

icon-templating-app

 

icon-connector

 

icon-solution

 

icon-extension

 

icon-paid

 

icon-free

 

icon-unsupported

 

icon-installation

 

icon-welcome

 

icon-author-instance

 

icon-public-instance

 

icon-analytics-app

 

icon-stories-app

 

icon-text-block

 

icon-embed

 

icon-placeholder

 

icon-ellipsis

 

icon-search-result-filters

 

icon-hamburger-menu

 

icon-app-launcher

 

icon-previous

 

icon-next

 

icon-microphone

 

icon-zoom-picture

 

icon-radio-off

 

icon-checkbox-off

 

icon-checkbox-tick-2

 

icon-radio-on

 

icon-checkbox-on

 

icon-radio-dot-2


#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))