Page tree
Skip to end of metadata
Go to start of metadata

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:

  • 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. 

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