How to Create Icons Similar to the Standard Lazarus Component Palette
lazarus / 39-Graphics

----------------------------------------------------------------------
Aruna · 2025-08-09 12:31

Hi everyone, I just stumbled upon the answer to one of my own
questions:
QuoteDoes someone know how the IDE's icons were created and who was
involved in doing this?Attached screenshot has the answer

----------------------------------------------------------------------
Ally · 2025-08-09 15:41

Hallo Aruna,

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

QuoteAny tips for keeping lines and colors sharp at 24×24 pixels?Here
too, lines and edges should always be aligned with pixel precision.

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

QuoteI’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.”

QuoteDoes 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 · 2025-08-10 02:12

Quote from: Ally on August 09, 2025, 05:41:44 pmHallo Aruna, Hello
Roland. Thank you for responding.

Quote from: Ally on August 09, 2025, 05:41:44 pmQuoteWhat 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.

Quote from: Ally on August 09, 2025, 05:41:44 pmQuoteAny tips for
keeping lines and colors sharp at 24×24 pixels?Here too, lines and
edges should always be aligned with pixel precision.Understood...

Quote from: Ally on August 09, 2025, 05:41:44 pmQuoteRecommended 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.

Quote from: Ally on August 09, 2025, 05:41:44 pmQuoteI’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.

Quote from: Ally on August 09, 2025, 05:41:44 pmQuoteDoes 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.

Quote from: Ally on August 09, 2025, 05:41:44 pmI 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.

Quote from: Ally on August 09, 2025, 05:41:44 pmBest 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!