![[Jenkins]](/jenkins/static/0ee714c5/images/svgs/logo.svg){kind=logo}
Jenkins Symbols are an extensive and consistent collection of icons for use in Jenkins and plugins. Symbols are intended to be used everywhere a traditional icon would be used, such as in the sidebar, in buttons and in tables. Symbols are scalable, support different weights and adapt to the user's theme.
| Do | Don't |
|---|---|
| Symbols should be used to help a user recognise what a task does at a glance | Don't use custom symbols that aren't consistent with Jenkins |
| They should be recognisable and relevant, e.g. for credentials | Don't add symbols to headings, they just create visual clutter |
| Use a tooltip on the symbol if there isn't any accompanying text |
Using Symbols
Using symbols in your view is simple. Use the existing icon component and set the src value to the symbol you want, prefixed with "symbol-".
Symbols can also display tooltips:
It's also possible to customize symbols with custom classes:
You can change the size of the symbol by using one of the sizing classes:
Add more symbols with the ionicons API plugin
To use more symbols, add the ionicons-api-plugin to your project.
Click here for a sample how to add the API to your plugin
Reference the symbol with:
Custom Symbols
Add your symbol to:
{plugin-root}/src/main/resources/images/symbolsReference the symbol with:
Make sure you replace the placeholder parameters:
- symbolName - the file name of the symbol without the file extension (e.g. cloud)
- yourArtifactId - the artifact ID of your plugin, or the one of the plugin you want to load the symbol from
ArtifactId can be found in your pom.xml for Maven plugins or as shortName in build.gradle(.kts) for Gradle plugins.
To make your symbol themeable, adjust the following properties:
- stroke="currentColor"
- fill="currentColor"
You don't need to add both attributes, pick the one that matches your use case.