Creating a custom icon set
Recent Vivaldi builds introduce theme support for custom icon set for all toolbar buttons. Here’s how to best handle resources when creating your own icons.
Theme editing
You can populate all the theme buttons right in the Vivaldi UI. To place your own icons, go to Settings > Themes > Editor > Icons to see a list of all available toolbar buttons sorted by category, and the interface to place your own icons. Custom icons will be included in exported theme.
Button icon editor
Image size
Vivaldi supports 28 × 28 pixels bitmap or SVG images in all toolbars. Larger images will be scaled to this size.
Icon layout
Vivaldi icon glyphs are sized at, or around 16 pixels. Your icon should leave margin around its edges, not filling the entire canvas, which can lead to big icons in a cramped toolbar. However feel free to use the available room for shapes spanning outside the imaginary boundary, or for bigger icons.
Suggested icon placement on canvas
Bitmap resources
Vivaldi supports bitmap images in BMP, GIF, JPG, JPEG, PNG, and WEBP format. Consider using a format that supports the alpha channel mask. Icons should maintain sufficient contrast against both light and dark background colors, as your theme icon set can be used in other themes as well.
Bitmap resources are best exported at double their target size to render sharply on high DPI displays and to leave room for UI scaling, i.e. export images at 56 × 56 pixels to double the resolution of the 28 pixel target.
SVG resources
Aside from bitmaps, Vivaldi supports the Scalable Vector Graphic format, which may be produced in a few different ways.
If you’d like your icon to inherit current theme colors, do not use any fill color definitions, or use the currentColor keyword. That ensures proper color inheritance in all the different toolbar and theme combinations.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28 28"
fill="currentColor"
>
<!-- inherits fill color from current Vivaldi theme -->
<path d="..." />
<!-- uses specific fill color -->
<path d="..." fill="#ffeea8" />
</svg>SVG color inheritance example
On the other hand you can control all stroke and fill colors locally, independent of current theme colors. In that case you want to ensure all colors are set, so as not to inherit unexpected theme colors.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28 28"
fill="#000"
>
<!-- inherits default fill color #000 specified above -->
<path d="..." />
<!-- uses specific fill color -->
<path d="..." fill="#ffeea8" />
</svg>SVG code example with own color definitions
Whether you choose to use fill or stroke based icons is up to you. In the later case define stroke properties inline.
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28 28"
fill="none"
stroke="currentColor"
>
<!-- no fill; stroke color inherited from current Vivaldi theme -->
<path
d="..."
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>Stroke-based SVG icon example
Minimized SVG
It is good idea to minimize exported SVG icons with a tool such as SVGO. Your editor may be minimizing SVG on export too. However it may come with caveats. For example, if your icon uses clip-path property make sure that clip path IDs are always unique.
SVG file encoding
SVG files need to be UTF-8 encoded and will be sanitized on import.
Theme archive format
The current Vivaldi theme format was expanded to support icons for a growing number of toolbar buttons or command chains. Single icon resource is exported in a theme archive JSON as button ID and image path pair.
"buttons": {
"buttonId": "imagefile01.png"
}If you are batch-processing the icon images you may consider exporting your custom theme in Vivaldi and updating the images by replacing them in the resulting ZIP archive.
Figma Template
If you want to start creating a new icon set based off the official Vivaldi UI icons, we have created a Figma template for the occasion. The URL to the template is https://www.figma.com/community/file/1214878626987427743