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.

Magnolia icon font

Icons used in Magnolia come from the pictographic MagnoliaIcons font. Each icon is a character. The character is 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.

Icon sizes

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

36 px

App launcher

20 px

Action bar

17 px

Tab

Choosing an icon

When choosing an icon for your own app or action:

  • Look through the icons provided in the MagnoliaIcons font. Find an icon that represents your app or action well. 
  • Avoid icons that are already used. Using the same icon for two different purposes confuses users and leads to errors.
  • If you create your own icons, adhere to the Magnolia design language.

Default 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_off

 

icon-checkbox_on

 

icon-checkbox-tick

 

icon-radio-dot

 

icon-radio-off

 

icon-radio-on

 

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-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-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-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-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-open

 

icon-close

 

icon-leaf-node

 

icon-reference-node

 

icon-templating-app

 

 

Using a custom icon font

To use a custom icon font:

  1. Create an icon font.
  2. Create a CSS file which references your custom font. See how the  magnolia-icons.scss  CSS file uses the @font-face declaration.
  3. In the CSS file, specify classes for your icons. Use a namespace that will prevent collision with Magnolia's native classes. For example icon-mycompanyname-shop-app instead of icon-shop-app.
  4. Configure a custom Vaadin theme that is different from the default admincentral theme. Your Vaadin theme should include admincentral theme and it needs to compile it. See Using ecustom styles in your Magnolia app.
  • No labels