Icons

15. Icons

Icons are small pictures which are used to aid navigation or understanding within a user interface. They are commonly found on buttons, either alongside or in place of text, or alongside actions in menus. By using easily recognizable indicators you can make your interface easier to use.

In PyQt6 you have a number of different options for how to source and integrate icons into your application. In this section we’ll look at those options and the pros and cons of each.

Qt Standard Icons

The easiest way to add simple icons to your application is to use the built-in icons which ship with Qt itself. This small set of icons covers a number of standard use cases, from file operations, forward & backward arrows and message box indicators.

The full list of built-in icons follows.

Figure 92. Qt Builtin icons

You’ll notice that this set of icons is a bit restrictive. If that’s not a problem for the app you’re building, or if you only need a few icons for your app it might still be a viable option for you.

The icons are accessible through the current application style using QStyle.standardIcon(name) or QStyle.. The full table of built-in icon names is shown below.

SP_BrowserReload			SP_DriveFDIcon		SP_MessageBoxInformation
SP_ArrowBack		SP_DirIcon		SP_MediaSkipBackward
SP_ArrowDown		SP_DirLinkIcon		SP_MediaSkipForward
SP_ArrowForward		SP_DirOpenIcon		SP_MediaStop
SP_ArrowLeft		SP_DockWidgetCloseButton		SP_MediaVolume
SP_ArrowRight		SP_DriveCDIcon		SP_MediaVolumeMuted
SP_ArrowUp		SP_DriveDVDIcon		SP_MessageBoxCritical
SP_BrowserStop			SP_DriveHDIcon		SP_MessageBoxQuestion
SP_CommandLink			SP_DriveNetIcon		SP_MessageBoxWarning
SP_ComputerIcon			SP_FileDialogBack		SP_TitleBarCloseButton
SP_CustomBase			SP_FileDialogContentsVie w		SP_TitleBarContextHelpBu tton
SP_DesktopIcon			SP_FileDialogDetailedVie w		SP_TitleBarMaxButton
SP_DialogApplyButton			SP_FileDialogEnd		SP_TitleBarMenuButton
SP_DialogCancelButton			SP_FileDialogInfoView		SP_TitleBarMinButton
SP_DialogCloseButton			SP_FileDialogListView		SP_TitleBarNormalButton
SP_DialogDiscardButton			SP_FileDialogNewFolder		SP_TitleBarShadeButton
SP_DialogHelpButton			SP_FileDialogStart		SP_TitleBarUnshadeButton
SP_DialogNoButton			SP_FileDialogToParent		SP_ToolBarHorizontalExte nsionButton
SP_DialogOkButton			SP_FileIcon		SP_ToolBarVerticalExtens ionButton
SP_DialogResetButton			SP_FileLinkIcon		SP_TrashIcon
SP_DialogSaveButton			SP_MediaPause		SP_VistaShield
SP_DialogYesButton			SP_MediaPlay		SP_DirClosedIcon
SP_MediaSeekBackward			SP_DirHomeIcon		SP_MediaSeekForward

 

You can access these icons directly via the QStyle namespace, as follows.

icon = QStyle.standardIcon(QStyle.SP_MessageBoxCritical)

button.setIcon(icon)

You can also use the style object from a specific widget. It doesn’t matter which you use, since we’re only accessing the built-ins anyway.

style = button.style() # Get the QStyle object from the widget.

icon = style.standardIcon(style.SP_MessageBoxCritical)

button.setIcon(icon)

If you can’t find an icon you need in this standard set, you will need to use one of the other approaches outlined below.

ë

While you can mix and match icons from different icon sets

together, it’s better to use a single style throughout to keep your

app feeling coherent.

Icon files

If the standard icons aren’t what you are looking for, or you need icons not available, you can use any custom icons you like. Icons can be any of the Qt supported image types on your platform, although for most use cases PNG or SVG images are preferable.

ë

To get list of supported image formats on your own platform

you can call QtGui.QImageReader.supportedImageFormats().

Icon sets

If you’re not a graphic designer you will save yourself a lot of time (and trouble) by using one of the many available icon sets. There are thousands of these available online, with varying licenses depending on their use in open source or commercial software.

In this book and example apps I’ve used the Fugue icon set, which is also free to use in your software with acknowledgement of the author. The Tango icon set is a large icon set developed for use on Linux, however there are no licensing requirements and it can be used on any platform.

Resource	Description	License
Fugue by p.yusukekamiyamane	3,570 16x16 icons in PNG format	CC BY 3.0
Diagona by p.yusukekamiyamane	400 16x16 and 10x10 icons in PNG format	CC BY 3.0
Tango Icons by The Tango Desktop Project	Icons using the Tango project color theme.	Public domain

 

While you do have control over the size of icons using in menus

and toolbars, in most cases you should leave these as-is. A good

standard icon size for menus is 20x20 pixels.

Z

Sizes smaller than this are fine too, the icon will be centered

rather than scaled up.

Create your own

If you don’t like any of the available icon sets, or want a unique look to your application, you can of course design your own icons. Icons can be created using any standard graphics software and saved as PNG images with transparent background. The icons should be square and of a resolution that they do not need to be scaled up or down when used in your application.

Using icon files

Once you have your icon files — whether from icon sets or self-drawn — they can be used in your Qt applications by creating instances of QtGui.QIcon, passing in the filename of the icon directly.

QtGui.QIcon("")

While you can use both absolute (complete) and relative (partial) to point to your

file, absolute paths are prone to break when distributing your applications. Relative paths will work as long as the icon files are stored in the same location relative to your script, although even this can be difficult to manage when packaging.

Z

In order to create icon instances you must have already created

a QApplication instance. To ensure this is the case, you can

create your app instance at the top of your source file, or create

your QIcon instances in the __init__ for the widget or window

that uses them.

Free Desktop Specification Icons (Linux)

On Linux desktops there is a thing called the Free Desktop Specification which defines standard names for icons for specific actions.

If your application uses these specific icon names (and loads the icon from a "theme") then on Linux your application will use the current icon set which is enabled on the desktop. The goal here is to ensure that all applications have the same look & feel while remaining configurable.

To use these within Qt Designer you would select the drop-down and choose "Set Icon From Theme..."

Figure 93. Selecting an icon theme

You then enter the name of the icon you want to use, e.g. document-new (see the full list of valid names).

Figure 94. Selecting an icon theme

In code, you can get icons from the active Linux desktop theme using icon = QtGui.QIcon.fromTheme("document-new"). The following snippet produces a small window (button) with the "new document" icon showing, from the active theme.

Listing 92. icons/linux.py

from PyQt6.QtWidgets import QApplication, QPushButton

from PyQt6.QtGui import QIcon

import sys

app = QApplication(sys.argv)

button = QPushButton("Hello")

icon = QIcon.fromTheme("document-new")

button.setIcon(icon)

button.show()

app. exec ()

The resulting window will look like the following on Ubuntu, with the default icon theme.

Figure 95. Linux Free Desktop Specification "document-new" icon

If you’re developing a cross-platform application you can still make use of these standard icons on Linux. To do this, use your own icons for Windows and macOS and create a custom theme in Qt Designer, using the Free Desktop Specification names for the icons.