Solved Tips on how to create Custom Icons?

[ThePfromtheO]

@ThePfromtheO said in Tips on how to create Custom Icons?:

What's the best format, SVG or webp?

I think SVG might be better since it might change its colour based on the colour of the toolbar, maybe?
Thanks!

[mib2berlin]

@ThePfromtheO
Hi, I have a 440x360 pixel Gimp file and add layers for background and different icons.
I often download SVG files, scale them and make the backgound transparent, then paste them into my default file and scale them to my like.
I export to PNG then.

[DoctorG]

@ThePfromtheO I think, for UI buttons/elements SVG is the best way as you can scale it without getting unsharp.

I was working on some about 2 years ago for a own theme creating SVG with Adobe Illustrator or LibreOffice Draw.

[edwardp]

@ThePfromtheO Vivaldi has a Help page on this:

Create a custom icon set

Icons should be 28x28 pixels bitmap, or SVG.

[ThePfromtheO]

@edwardp Maybe this's the option for making the icons change their colour based on the toolbar?
This is the link

[ThePfromtheO]

@mib2berlin Yes, but I asked about the icons of the browser that can be customized along with the theme, not the bookmarks or Speed Dials.
Do you know how that can be achieved? The biggest problem is for the icons to change their colour based on the colour of the toolbar.

[edwardp]

@ThePfromtheO The only times I've seen the main toolbar icons change color, is via the Color Overrides options in the Themes editor and the icons will change between black and white, as you've displayed above. I've never seen them in any other colors.

[ThePfromtheO]

@edwardp OK, that's great, that was what I thought too, but how could I achieve this?
I created an (ugly, anyway) icon with a GUI SVG icon creator, but it remains black, no matter the colour of the toolbar. Look here:
This is where the "Home" icon should have been. But, it's the same colour as the toolbar...

[nomadic]

@ThePfromtheO The answer on how to make the icons' color adaptable is in that link @edwardp posted. You should change any fill and stroke colors to "currentColor". Full instructions here.

You can do this in Inkscape with the XML editor, but it can be easier to just open the SVG in a text editor and change the values there.

---

It can also be helpful to download a complete icon set and edit it to suit your needs. That way you can see how everything is supposed to work and you already have all the files will need to be created. You just need to download and install a theme from the store and then export it from the themes page in settings.

My After Glow theme has the full set of icons, and I also made use of many of the more advanced CSS variables for the dynamic icons. Definitely would want to look at them in a text editor to figure out how they work.

---

I also started a thread for guides on creating more advanced dynamic icons, but got busy and sort of forgot about it. Definitely more advanced than most people would want, but the CSS variables can be used for some fun effects. Vivaldi also added many of the variables I proposed in the custom CSS mod, so that isn't really necessary anymore.

https://forum.vivaldi.net/topic/94375/guide-creating-fully-featured-custom-icon-sets-for-themes

There I give an example of how to make a history panel icon that responds to being activated like this:

[mib2berlin]

@ThePfromtheO
Ah yes, sorry, but I do the same with icons.
This is 20x20 pixel on 800%, the marker lines help to scale.

.

For this size SVG is much better but you need vector based software, Gimp or Photoshot cant do this.
I cant work with Adobe Illustrator or LibreOffice Draw, to be honest, I hate it.

[ThePfromtheO]

@mib2berlin said in Tips on how to create Custom Icons?:

you need vector based software, Gimp or Photoshot cant do this

And what would you recommend? Something free, if not entirely, at least partly.

[ThePfromtheO]

@nomadic Yes, thanks, but I'm not gonna complicate with CSS modifications right now. It means I would have to learn that, and I can say I barely have the required time...
I will look into creating icons only, CSS modifications can't be used with the "Themes" feature, right? You can't upload them via the "Theme Upload", isn't it?

[mib2berlin]

@ThePfromtheO
All open office packages include a vector apllication, as @DoctorG mentioned, Open Office Draw.
On Linux Inkscape is close to Adobe Ilustrator, no idea if a Windows version is available.

[ThePfromtheO]

@mib2berlin Thanks, you said that you hate working with Adobe Illustrator or LibreOffice Draw.
I use Ubuntu, so I'm not interested in Windows compability.

[Pathduck]

@ThePfromtheO said in Tips on how to create Custom Icons?:

I use Ubuntu, so I'm not interested in Windows compability.

Erm...
https://www.libreoffice.org/download/download-libreoffice/
https://inkscape.org/release/

Information at your fingertips, a web search away.

Just wondering, you have marked this topic as a Question, and people give you tips and try to push you in the right direction. And your only answer seems to be "not interested".

So what would be the criteria for someone answering this topic? Do you want someone to teach you dealing with SVGs from scratch? If so that's not going to happen, and there's plenty of resources for learning SVGs, again a quick web search away.
https://developer.mozilla.org/en-US/docs/Web/SVG
https://www.w3schools.com/graphics/svg_intro.asp

My 2€: SVGs are the realm of graphic designers and web developer types. They are extremely powerful but there's a very steep learning curve. I stay away from them, unless I can download a ready-to-go SVG from some site.

[ThePfromtheO]

@Pathduck Please excuse me for answering so late. I had a very busy time these days, and I hardly managed to keep up with the posts. I know how it is when you expect someone to answer, and he doesn't seem to care about your comments, I even had similar events, and I should learn that sometimes people don't have time to answer, not to think from the first that they have a certain purpose for not answering right then.

@Pathduck said in Tips on how to create Custom Icons?:

Erm...
https://www.libreoffice.org/download/download-libreoffice/
https://inkscape.org/release/

Information at your fingertips, a web search away.

But, I didn't ask him to tell me what compatibility those apps had, I only wanted him to know what computer operating system I use, so I'm not interested in Windows. Do you think me to be so lazy, as I don't want to search the Internet for something when that's so easy? If I don't feel like doing that now, how would I have felt decades ago when you needed to find out in books what you wanted to know? (Actually, I already have both Inkscape and LibreOffice installed)

@Pathduck said in Tips on how to create Custom Icons?:

Just wondering, you have marked this topic as a Question, and people give you tips and try to push you in the right direction. And your only answer seems to be "not interested".

So what would be the criteria for someone answering this topic?

No, but the posts didn't answer my questions from the first. Would you have liked it if I had said: "Hey guys, thanks, now I know everything I need!" when I actually got only one question answered?! Plus, as I said, I didn't have time to look thoroughly through each answer and go to each link provided (although thanks, you all, you really gave me many).

@Pathduck said in Tips on how to create Custom Icons?:

My 2€: SVGs are the realm of graphic designers and web developer types. They are extremely powerful but there's a very steep learning curve. I stay away from them, unless I can download a ready-to-go SVG from some site.

Thanks, that certainly saved me much otherwise lost time. I would have finally understood that it's too much for me (and for my spare time), but earlier is better than later.

In conclusion, @nomadic, I think that the best solution would be to create custom icons only for themes that don't have the "Accent from Page" setting applied to the toolbar, but only to the window, or not at all. I won't manage to learn enough about SVGs, and that would be stupid to leave only the toolbar icons as are, they won't go on well with the other ones.
Thanks to you all!

[Pathduck]

@ThePfromtheO You marked this topic as a Question, its status is Unsolved. This requires you to explicitly mark one of the answers as the correct answer so the topic can get a status of Solved.

Unless you plan to keep it "Unsolved" for ever in which case I will probably just choose a post and mark it solved for you.

If you didn't actually want the hassle of having to choose an answer then you shouldn't have marked it as a question.

Of course you can just wait more for the perfect answer, up to you.

[ThePfromtheO]

@Pathduck said in Tips on how to create Custom Icons?:

Of course you can just wait more for the perfect answer, up to you.

I already posted a "conclusion", don't be mischievous! I only waited for you, and for @nomadic, to answer to it.
You answered, now only @nomadic has to if he wants. But, that's ok, I'm gonna mark it as solved, your brain mustn't be scratched by its vision anymore.

[ThePfromtheO]

Thanks to you all, @mib2berlin, @DoctorG, @edwardp, and @nomadic for giving your time to help me with this complicated (or at least not easy) project.
Also, to @Pathduck for hurrying this process up

To reinforce the solution I decided to follow: I'm gonna create custom icons only for themes that don't have the "Accent from Page" setting applied to the toolbar, but only to the window, or not at all. This is the best solution for me, as I don't have enough spare time to learn about SVG...

[nomadic]

@ThePfromtheO said in Tips on how to create Custom Icons?:

CSS modifications can't be used with the "Themes" feature, right? You can't upload them via the "Theme Upload", isn't it?

Yeah, CSS modifications aren't a part of themes. <style> elements get stripped out, but you can still use the style="" attribute and Vivaldi's CSS variables in other attributes as well (like fill="", opacity="", etc.) on various parts of the SVG.

I only mentioned CSS modifications in regard to the that advanced icon design guide thread I posted. CSS variables, on the other hand, are necessary to make a fully working icon set. Things like the Page Tiling, Images and Animations Toggle, Break Mode, and Clock will all lose functionality if you customize them without considering CSS variables.

Those icons aren't too critical in every toolbar setup, so as a beginner in SVG icon creation, you don't have to worry about them. The vast majority of the icon sets in the theme store do not make use of the CSS variables.

---

As for the program to use in SVG icon creation, I use Inkscape. I also have the paid program Affinity Designer, but I haven't gotten as comfortable in using that program yet.

But to make the icons adapt in color to changing toolbar colors, the SVG editor you really need is just a text editor.

If you open an SVG in a text editor, you will see something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" version="1.1">
  <path style="fill:none;stroke:#000000;stroke-linejoin:round"
    d="M 20.45751,10.451309 14,6.9999562 7.5424906,10.451309 m 12.9150184,-1.63e-4 v 7.487228 l -6.457388,3.061692 v -7.097558 z m -12.915018,0 v 7.487228 l 6.457387,3.061692 v -7.097558 z" />
</svg>

In its current state, it won't adapt to the toolbar color changes. To make it work, you need to remove set colors and change them to the text currentColor. The main things to look for are fill and stroke. They can be their own attributes or defined in the style attribute, like in the SVG above.

If you look at this line in the SVG above:
<path style="fill:none;stroke:#000000;stroke-linejoin:round" ...
You see that the SVG path is colored black, #000000, using the stroke, while the fill is set to none, which is transparent. So you only need to adjust the stroke in this case because giving the fill a color will alter the design of the SVG. You just need to change the #000000 to currentColor and the SVG is all set, like so:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" version="1.1">
  <path style="fill:none;stroke:currentColor;stroke-linejoin:round"
    d="M 20.45751,10.451309 14,6.9999562 7.5424906,10.451309 m 12.9150184,-1.63e-4 v 7.487228 l -6.457388,3.061692 v -7.097558 z m -12.915018,0 v 7.487228 l 6.457387,3.061692 v -7.097558 z" />
</svg>