Sailfish Icon Reference

Sailfish SDK includes a set of Silica themed icons that can be used to build an application UI with consistent look and feel. These icons follow the Silica theme size definitions as defined in each icon category section below.

Silica supports colorizaton of monochrome icons with "?" + color notation. Here's an example how to use a Silica themed icon with colorization:

import QtQuick 2.0
import Sailfish.Silica 1.0

IconButton {
    icon.source: "image://theme/icon-l-play?" + (pressed
                 ? Theme.highlightColor
                 : Theme.primaryColor)
    onClicked: console.log("Play clicked!")
}

Small

Small sized icons can be used in association with text elements, or they can be used for indicative purposes. These icons follow Theme.iconSizeSmall and they should not be used as touch targets.

Icon Name Icon Name Icon Name

icon-s-alarm

icon-s-attach

icon-s-bluetooth

icon-s-certificates

icon-s-chat

icon-s-clipboard

icon-s-cloud-download

icon-s-cloud-upload

icon-s-date

icon-s-developer

icon-s-device-download

icon-s-device-upload

icon-s-duration

icon-s-edit

icon-s-favorite

icon-s-group-chat

icon-s-high-importance

icon-s-installed

icon-s-invitation

icon-s-jolla

icon-s-like

icon-s-low-importance

icon-s-message

icon-s-mms

icon-s-new

icon-s-retweet

icon-s-sailfish

icon-s-secure

icon-s-setting

icon-s-sync

icon-s-task

icon-s-time

icon-s-timer

icon-s-update

Medium

Medium sized icons are typically used with list items, buttons and other components with touch interaction. These icons follow Theme.iconSizeMedium, and that is the smallest icon size that should be used with touch enabled components.

Icon Name Icon Name Icon Name

icon-m-about

icon-m-accessory-speaker

icon-m-acknowledge

icon-m-add

icon-m-airplane-mode

icon-m-alarm

icon-m-ambience

icon-m-attach

icon-m-autocaps

icon-m-back

icon-m-backspace

icon-m-backup

icon-m-battery

icon-m-bluetooth-device

icon-m-bluetooth

icon-m-bubble-universal

icon-m-camera

icon-m-capslock

icon-m-car

icon-m-certificates

icon-m-charging

icon-m-chat

icon-m-clear

icon-m-clipboard

icon-m-clock

icon-m-close

icon-m-cloud-download

icon-m-cloud-upload

icon-m-computer

icon-m-crop

icon-m-day

icon-m-delete

icon-m-developer-mode

icon-m-device-download

icon-m-device-lock

icon-m-device-upload

icon-m-device

icon-m-dialpad

icon-m-dismiss

icon-m-display

icon-m-document

icon-m-dot

icon-m-down

icon-m-edit

icon-m-enter-accept

icon-m-enter-close

icon-m-enter-next

icon-m-enter

icon-m-events

icon-m-favorite-selected

icon-m-favorite

icon-m-flip

icon-m-folder

icon-m-forward

icon-m-game-controller

icon-m-gesture

icon-m-gps

icon-m-headphone

icon-m-headset

icon-m-health

icon-m-home

icon-m-image

icon-m-imaging

icon-m-jolla

icon-m-keyboard

icon-m-lan

icon-m-left

icon-m-levels

icon-m-like

icon-m-link

icon-m-location

icon-m-mail-open

icon-m-mail

icon-m-mark-unread

icon-m-media

icon-m-menu

icon-m-message

icon-m-mic-mute

icon-m-mic

icon-m-mobile-network

icon-m-moon

icon-m-mouse

icon-m-music

icon-m-next

icon-m-night

icon-m-note

icon-m-notifications

icon-m-other

icon-m-page-down

icon-m-page-up

icon-m-pause

icon-m-people

icon-m-person

icon-m-phone

icon-m-pin

icon-m-play

icon-m-presence

icon-m-previous

icon-m-question

icon-m-reboot

icon-m-redirect

icon-m-refresh

icon-m-region

icon-m-remote-security

icon-m-remove

icon-m-repeat

icon-m-reset

icon-m-right

icon-m-rotate-left

icon-m-rotate-right

icon-m-rotate

icon-m-sailfish

icon-m-scale

icon-m-screenlock

icon-m-search

icon-m-service-devices

icon-m-service-upload

icon-m-share

icon-m-shortcut

icon-m-shuffle

icon-m-sms

icon-m-sounds

icon-m-speaker-mute

icon-m-speaker

icon-m-swipe

icon-m-sync

icon-m-tab-close

icon-m-tablet

icon-m-tabs

icon-m-tether

icon-m-text-input

icon-m-time-date

icon-m-timer

icon-m-toy

icon-m-traffic

icon-m-train

icon-m-transfer

icon-m-up

icon-m-usb

icon-m-vibration

icon-m-video

icon-m-watch

icon-m-whereami

icon-m-wizard

icon-m-wlan-0

icon-m-wlan-1

icon-m-wlan-2

icon-m-wlan-3

icon-m-wlan-4

icon-m-wlan-hotspot

icon-m-wlan-no-signal

icon-m-wlan

Large

Large sized icons can be used as standalone touch elements. They follow Theme.iconSizeLarge.

Icon Name Icon Name Icon Name

icon-l-acknowledge

icon-l-add

icon-l-airplane-mode

icon-l-answer

icon-l-attention

icon-l-backup

icon-l-battery

icon-l-bluetooth

icon-l-charging

icon-l-check

icon-l-clear

icon-l-clipboard

icon-l-clock

icon-l-computer

icon-l-date

icon-l-developer-mode

icon-l-dismiss

icon-l-document

icon-l-gps

icon-l-image

icon-l-mass-storage

icon-l-message

icon-l-mobile-network

icon-l-music

icon-l-new

icon-l-other

icon-l-pause

icon-l-people

icon-l-play

icon-l-power

icon-l-reboot

icon-l-redirect

icon-l-reject

icon-l-snooze

icon-l-storage

icon-l-tether

icon-l-timer

icon-l-usb

icon-l-wlan

Cover action

These icons should be used with CoverAction component. The size for these is Theme.iconSizeSmall.

Icon Name Icon Name Icon Name

icon-cover-alarm

icon-cover-answer

icon-cover-backup

icon-cover-camera

icon-cover-cancel

icon-cover-dialer

icon-cover-favorite

icon-cover-hangup

icon-cover-location

icon-cover-message

icon-cover-mute

icon-cover-new

icon-cover-next-song

icon-cover-next

icon-cover-pause

icon-cover-people

icon-cover-play

icon-cover-previous-song

icon-cover-previous

icon-cover-refresh

icon-cover-reject

icon-cover-search

icon-cover-shuffle

icon-cover-subview

icon-cover-sync

icon-cover-timer

icon-cover-transfers

icon-cover-unmute

Notification

These icons are designed to be used with notifications. The size for these is Theme.iconSizeSmall.

Icon Name Icon Name Icon Name

icon-lock-alarm

icon-lock-application-update

icon-lock-backup

icon-lock-birthday

icon-lock-calendar

icon-lock-chat

icon-lock-email

icon-lock-friend-request

icon-lock-information

icon-lock-installed

icon-lock-invitation

icon-lock-locked

icon-lock-missed-call

icon-lock-mms

icon-lock-more

icon-lock-settings

icon-lock-sms

icon-lock-social

icon-lock-system-update

icon-lock-transfer

icon-lock-voicemail

icon-lock-warning