Skip to content

Using icons

In order to use icons with GTK, we have two options :

  • Use icons bundled with GTK.
  • Bundle SVG icons within our app resources.

GTK bundled icons

To use GTK bundle icons, we just need to know the name of the icon we want to use. We can use the "GTK Icon Browser" app to see the icons installed on our system.

To install it, run :

apt-get install gtk-4-examples

dnf install gtk4-devel-tools

We can then look up icons and call them by name in our code. For instance :

var icon = Image.fromGicon(Icon.newForString("avatar-default-symbolic"));

This is easy but there aren't a lot of icons to choose from

Custom SVG Icons

Get an SVG icon Source

A good source of GTK-themed SVG icons is the Icons Library app. The app offers a lot of icons and allows copying the SVG code.

Let's say we want to use the penguin-symbolic icon from the Icons Library app. Let's save its SVG code in a file in our Java resource folder (i.e. src/main/resources/icons).

GTK resources compiler

First, we install the software to compile GTK application resources : 

apt-get install libglib2.0-dev-bin

dnf install glib2-devel

GTK resources file

Then, we create the GTK XML resource file in our Java resources folder (i.e src/main/resources) ; let's call it ourapp.gresource.xml :

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
    <gresource prefix="/icons">
        <file alias="penguin-symbolic" preprocess="xml-stripblanks">icons/penguin-symbolic.svg</file>
    </gresource>
</gresources>

Gradle build script to compile GTK resources file

We now add a gradle task to ou Gradle build script to compile the GTK resources file when we build our application.

tasks.register('compileResources') {
    exec {
        workingDir 'src/main/resources'
        commandLine 'glib-compile-resources', 'ourapp.gresource.xml'
    }
}

tasks.named('classes') {
    dependsOn compileResources
}

tasks.register("compileResources") {
    exec {
        workingDir("src/main/resources")
        commandLine("glib-compile-resources", "ourapp.gresource.xml")
    }
}

tasks.named("classes") {
    dependsOn("compileResources")
}

Use the icon in our app

We can now use the icon using Image.fromResource and the string name of the icon, which is this prefix of the icon, concatenated with its alias:

var image = Image.fromResource("/icons/key-symbolic");