Solved Tips on how to create Custom Icons?

[ThePfromtheO]

Hello, I've never created icons, except for fun.
Especially the ones that already created custom icons for Vivaldi themes, can you please give me some tips?

• What's the best format, SVG or webp?

• What icon creator software do/did you use?

• How did you do for the themes that get the accent from the page and apply it to the toolbar, so the icons on the toolbar(like the "Homepage" or the "Extensions" one) would change their colour in a bright one if the accent is dark, and in a dark one if the accent is light? Like this:

• Any other Tips or tricks you're willing to share?

Note: I "promised" to create custom icons for one of my themes, and I would like to keep my word. But, I need some help
Please, don't keep the information only for you. I could finally find it on the Internet, but harder, and I would be grateful to you if you'd help me not to need to surf on the Internet when there are already fellows able to share that information

Thank you in advance!

[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...

[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...