How to Create Icons Similar to the Standard Lazarus Component Palette

[Aruna]

Hi everyone, I just stumbled upon the answer to one of my own questions:

Does someone know how the IDE's icons were created and who was involved in doing this?

Attached screenshot has the answer 

[Ally]

Hallo Aruna,

What font (and size) works best for small palette icons with text?

I have designed my own fonts for this purpose. Attached are sizes 5, 6, and 7 pixels.
Vertically, the characters should be aligned to whole pixels. The horizontal alignment must always be based on the neighboring characters.

Any tips for keeping lines and colors sharp at 24×24 pixels?

Here too, lines and edges should always be aligned with pixel precision.

Recommended tools or workflows to match the flat, crisp style of the built-in icons?

I create the icons with Incscape and export them from there in PNG format.

I’d like my icons to feel like a natural part of the Lazarus palette, not obviously “added on.”

To do this, you can try using the color scheme of the Lazarus icons. I chose the colors so that they are still acceptable to see in “dark mode.”

Does someone know how the IDE's icons were created and who was involved in doing this?

To illustrate this, I have included a CPU icon as an example.
Here you can also see how lines, edges, and characters are aligned with the pixel grid.
In addition, Inkscape templates for the most common icon sizes are included, which are already assigned the appropriate pixel grid.

I hope I was able to help you a little.


Best regards
Roland

[Aruna]

Hallo Aruna,

Hello Roland. Thank you for responding.

What font (and size) works best for small palette icons with text?

I have designed my own fonts for this purpose. Attached are sizes 5, 6, and 7 pixels.
Vertically, the characters should be aligned to whole pixels. The horizontal alignment must always be based on the neighboring characters.

Ah, you created your own fonts. That is amazing! Thank you so much for sending the zip.

Any tips for keeping lines and colors sharp at 24×24 pixels?

Here too, lines and edges should always be aligned with pixel precision.

Understood...

Recommended tools or workflows to match the flat, crisp style of the built-in icons?

I create the icons with Incscape and export them from there in PNG format.

It has been more than a decade since I last used inkscape so I am very rusty.

I’d like my icons to feel like a natural part of the Lazarus palette, not obviously “added on.”

To do this, you can try using the color scheme of the Lazarus icons. I chose the colors so that they are still acceptable to see in “dark mode.”

Yes good idea. I will try.

Does someone know how the IDE's icons were created and who was involved in doing this?

To illustrate this, I have included a CPU icon as an example.
Here you can also see how lines, edges, and characters are aligned with the pixel grid.
In addition, Inkscape templates for the most common icon sizes are included, which are already assigned the appropriate pixel grid.

I just installed inkscape and opened up some of your files. I have attached screenshots.

I hope I was able to help you a little.

My friend you have done a lot more than help me a little, you have made me get very curious which is a good thing.

Best regards
Roland

I think you must be fast asleep as I type this since Google tells me teh time now in Germany is 4:10AM early morning. I wish for you a very peaceful and pleasant day!