In RAD Studio 10.2.2, we have a number of UI upgrades (the new dark theme and welcome page and startup). But we have one more which I'm very pleased with and would like to share with you today: we've redone the component icons.
Delphi and C++'s component icons have been a mix of styles. Many date back twenty years, and have been partially updated over time, often in a mix of styles and a mix of sizes. (Component icons should come in 16, 24 and 32px sizes for differing display in the Tool Palette or component toolbar and the form designer; not only did we not always have all sizes, but sometimes they looked completely different at different sizes.) In addition, some of the icons didn't accurately represent what the component actually was. This has bothered me ever since the last redesign about ten years ago.
Here's TLabel at the small (16x16) and medium (24x24) sizes.
What is a label in Delphi/C++Builder? It's a bit of text. What does this label look like? A luggage tag. Yes, it's a label, but it's not a Delphi label. This illustrates that when designing new icons, they need to be designed aware of what the component actually is.
TActionList (top) and TActionManager (bottom).
Questions these icons raise includes: what is the architect's drafting triangle in the action manager for - what have actions got to do with drawing? Is there any way to tell, just by looking at these icons, that these components are closely related? Does anything in these icons actually communicate "action"?
These aren't bad icons - they both look like buttons and are clearly recognisable. But it is odd that they look very different, are differently coloured, at different sizes.
There are a couple of other problems with these icons. They're low visual quality: they are not antialiased, because component icons require they use colour-keyed transparency, where the lower-left pixel in an icon is the transparent colour. (That is, transparency is either on or off; there is no alpha channel.) Finally, they all look old - they do not look like icons designed recently.
This gave us a set of design goals for redoing the icons.
From analysis of the existing icons, we came up with several goals. Icons should:
Here's what the icons look like in 10.2.2.
These are really nice icons.
Let's look at these and compare to the design goals:
In 10.2.2, we also introduced a new dark IDE theme. What do these icons look like?
Above is the same table over the dark theme's background colour. As you can see, the icons have good contrast (the strong palette helps) and even the grey colour is clear and visible against both the light and dark backgrounds.
Or view this screenshot at full size.
This screenshot shows many more icons, and you can also see how related icons (such as the FireDAC ones dropped haphazardly on the form) can be seen to be related.
Finally, what does this mean for you if you are a component developer? You might find this section interesting even if you don't create your own components, because of what it means about where the IDE is heading.
Component icons can be both bitmap and PNG format. The new icons are all alpha-transparent and antialiased. They can either be a PNG image, or a 32bpp bitmap (non-premultiplied-alpha.)
If the bitmap is 32bpp, the IDE assumes it is a new-style icon and has a valid alpha channel. (During testing, we saw a few icons that were 32bpp bitmaps, but with an alpha channel that was 100% transparent. If you ship icons like that, your icon will come out as fully transparent.) If the bitmap is any other format, such as 24bpp, it assume it is an old-style colour-keyed icon. This gives full backwards compatibility, so old-style component icons will still work.
If you want to use a PNG instead of a bitmap, the resource names are the same, but suffixed "_PNG" and stored as a RCDATA resource, not a BITMAP resource. So TLabel's 32x32 icon, as a resource script using a PNG image, would be:
RCDATA TLabel32_PNG "tlabel32.png"
If you use 32bpp bitmaps, IDEs earlier than 10.2.2 won't display the icons correctly. There are two ways to handle this:
Our testing showed that loading bitmaps was faster than PNG images. For the components we ship with the IDE - about 700 components, with three image sizes - using PNGs would have added about a second and a half to the IDE startup speed. For this reason (and by the way, we have very fast IDE startup time in 10.2.2) we've gone with 32bpp bitmap images for 16, 24 and 32px icons.
You can use either bitmap or PNG, but if you have a component package with many components, please be aware of the impact on startup time if you choose PNGs.
Our guide is: Use PNG if you want very easy backwards compatibility, or small file (BPL) size; use bitmaps if you want fast loading. We use bitmaps for 16, 24, and 32px icons, and PNG for the 128px icons. Speaking of which...
The icons displayed above show 16, 24 and 32px icons... but also a much larger size. They are 128x128 versions of the same icon.
If you look in our component packages you will see 128px versions of the icon for each component, as a PNG resource. We ship them, but we do not use them yet. These icons are looking ahead towards a high DPI IDE. We use PNG for ours because at about 64x64px, the balance between speed loading and file size for large images tips - having 128px icons as bitmaps would significantly increase the size of the packages.
To add these yourself for your own components, add a "128" suffix for the names of the icon resources: eg, "TEdit128" (bitmap) or "TEdit128_PNG" (PNG).
We'd like to encourage you to update your icons in your component packs. You can, of course, use any style you want, and we hope being able to have antialiased icons with true alpha transparency will let you create great-looking images. However, if you want to design icons that fit in with our visual style, we definitely want to encourage you to do so.
You can see examples of the style above, and of course in the IDE itself. If you are a tech partner or MVP, we can even provide you with a copy of all of our icons, including the original Illustrator files and a document going into detail about our design process.
These new component icons are a fantastic visual improvement in the IDE.
We hope you find them as clear and well-designed as we've aimed for, and we would like to encourage you to update your icons and make use of the new antialiasing and alpha transparency support!