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.

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.

Large

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

Cover action

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

Notification

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