Monochrome icons

Important

TL;DR

The written here is not required to know for creating monochrome icons. All you need to know are a few things:

1. Create monochrome icons from templates only
2. Use colors from palettes below
3. Run ./prepare.sh and ./convert.sh scripts before copy the new monochrome icons to the theme

Monochrome icons are icons with limited numbers of colors, which are located in the following directories:

• 16x16/actions/
• 16x16/devices/
• 16x16/panel/
• 16x16/places/
• 22x22/actions/
• 22x22/panel/
• 24x24/actions/
• 24x24/panel/
• symbolic/

These icons have ability to change its colors to adapt current system color scheme. All the monochrome icons can be split into two groups, each group has its own rules. There are KDE Color Scheme and Symbolic icons.

KDE Color Scheme

KDE color scheme allows you to use colors from your current Plasma Colors scheme in icons. Look System and Accent Colors for details.

Every icon in the listed directories supports KDE color-scheme:

• 16x16/actions/
• 16x16/devices/
• 16x16/panel/
• 16x16/places/
• 22x22/actions/
• 22x22/panel/
• 24x24/actions/
• 24x24/panel/

Each icon with KDE color-scheme support has CSS stylesheet on the top of the SVG file. The colors in the stylesheets are using on systems without KDE color-scheme support.

<defs>
 <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color:#444444; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
 </style>
</defs>

Here is a list of colors and corresponding CSS classes that you should use in the monochrome icons:

Role	Predefined color	CSS class	Description
Normal	#444444, (#dfdfdf for panel icons only)	ColorScheme-Text	used to adapt icon color to text color, usually it is the base color of the icon
Inactive	#444444 + opacity:0.35	ColorScheme-Text	used to indicate disabled or inactive status; e.g. muted audio device, empty battery, and no Wi-Fi signal
Accent	#4285f4	ColorScheme-Highlight	used for accentuate certain elements to draw attention to an icon
Success	#4caf50	ColorScheme-PositiveText	used for success notices, to indicate trusted content, etc
Warning	#ff9800	ColorScheme-NeutralText	used to draw attention when another role is not appropriate; e.g. warnings, to indicate secure/encrypted content, etc
Error	#f44336	ColorScheme-NegativeText	used for errors, failure notices, notifications that an action may be dangerous (e.g. unsafe web page or security context), etc

* for panel icons only

Note

No need to add these classes manually. After running ./prepare.sh script, these colors will be automatically replaced with fill:currentColor and the corresponding CSS class will be added.

How to disable KDE Color Scheme for an icon theme

To disable KDE color scheme support in the theme, replace the FollowsColorScheme=true line in index.theme file with FollowsColorScheme=false.

Here is an example how to disable KDE ColorScheme for system-wide installed Papirus icon theme:

sudo sed -i 's/FollowsColorScheme=true/FollowsColorScheme=false/' /usr/share/icons/Papirus/index.theme

Symbolic icons

Symbolic icons are icons with -symbolic suffix in its file name, that are GTK theme-color aware. Only GTK 3+ apps and GTK 3+-based desktop environments can support them.

Here is a list of colors and CSS classes that you should use in the symbolic icons:

Role	Predefined color	CSS class	Description
Normal	#444444		used to adapt icon color to text color, usually it is the base color of the icon
Inactive	#444444 + opacity:0.35		used to indicate disabled or inactive status; e.g. muted audio device, empty battery, and no Wi-Fi signal
Error	#f44336	error	used for errors, failure notices, notifications that an action may be dangerous (e.g. unsafe web page or security context), etc
Success	#4caf50	success	used for success notices, to indicate trusted content, etc
Warning	#ff9800	warning	used to draw attention when another role is not appropriate; e.g. warnings, to indicate secure/encrypted content, etc

As you can see, GTK do not provide separate color as an accent color, so we use warning class for it.

Note

No need to add these classes manually. After running ./prepare.sh script, these CSS classes will be automatically added to objects.

Be aware of the following:

• Only fill colors can become theme-color-aware. Stroke colors will not become theme-color-aware. If you use Inkscape, do: select text, Menu → Path → Stroke to Path.
• Use opacity for gray-scaling, don't make the color "gray".
• Text has to be converted to a path. If you use Inkscape, do: select text, Menu → Path → Object to Path.