{"id":17903,"date":"2025-10-27T10:55:25","date_gmt":"2025-10-27T09:55:25","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&p=17903"},"modified":"2025-11-04T10:31:48","modified_gmt":"2025-11-04T09:31:48","slug":"icon-libraries-in-the-age-of-ai-do-we-still-need-custom-icons","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/icon-libraries-in-the-age-of-ai-do-we-still-need-custom-icons\/","title":{"rendered":"Icon libraries in the age of AI: Do we still need custom icons?"},"content":{"rendered":"

\"Illustration<\/p>\n

In this era of powerful AI image generation and freely available icon libraries, the question quickly arises: \u201cWhy bother designing icons \u2018by hand\u2019 at all?\u201d For many, resorting to existing solutions may seem like the easiest and fastest way. But in reality, it has been proven time and again that \u201cout-of-the-box\u201d solutions are not enough\u2014especially when requirements become more complex and individualized. This was exactly the case for us when we wanted to translate our Centigrade service icons into automatically generatable 3D visuals. It was a project that simply could not be solved with off-the-shelf solutions.<\/p>\n

In this blog post, you can find out how I approached this design process, why we deliberately set creative limits, and what a Python script has to do with it all.<\/p>\n

Initial problem<\/h2>\n

\"Centigrade<\/p>\n

Centigrade offers a wide range of services\u2014and our website already features corresponding icons that visually illustrate each of our services, from user research and UX & UI design to AI automation. In the future, there will be separate landing pages for each service, which will allow users to interactively experience these diverse services. These pages will not only provide information, but also offer playful experiences in a 3D world. So you can look forward to it! My part in this is to design the existing service icons in such a way that they can be modeled into interactive 3D visuals \u2013 as animated conveyor belts and production stations that transform customer inquiries into digital experiences.<\/p>\n

The respective 3D visuals should not be redesigned each time, but rather generated automatically from predefined segments and stations.<\/p>\n

That was precisely the initial question in my design process: \u201cHow should icons be structured so that they contain enough detail to be recognizable and distinguishable, but are also simple enough to serve as a blueprint for the 3D visuals?\u201d The icons had to follow a logic of reusable segments and also comply with formal design rules. As is so often the case, the motto was: \u201cForm follows function.<\/a>\u201d<\/p>\n

Since each of our service icons consists of a single line, and this line will later become a conveyor belt, we had to take the space for the stations into account in the design. To make this work, we had to limit the number of angles and create enough space along the lines to be able to place the stations neatly.<\/p>\n

Test setup<\/strong><\/h2>\n

\"Centigrade<\/p>\n

What i knew:<\/strong>
\nThe icons should consist of a single, open line as described \u2013 with a clearly recognizable start and end point.
\nIn order to use the icons later as a basis for the 3D visuals, I had to export a continuous vector path as SVG. I was able to work with strokes in Figma.
\nIcons that were too complex had to be significantly reduced and abstracted to make room for the respective stations within the icon.
\n90\u00b0 angles work well \u2013 horizontal and vertical lines allow enough space for the stations.
\nAt the same time, visual curve transitions ensure that the later animated virtual conveyor belt maintains a consistent width.<\/p>\n

What I needed to find out:<\/strong><\/p>\n

Which angles other than 90\u00b0 can be used effectively\u2014e.g., 30\u00b0, 45\u00b0, 60\u00b0?
\nWhat is the best way to simulate the curve segments technically in order to achieve a harmonious connection between the 2D icons and the 3D visualization? Are the stroke settings in Figma sufficient for this, or are manual adjustments necessary?<\/p>\n

My approach<\/strong><\/p>\n

To find out which angles work best, I created different variants in Figma. First, I deactivated the curve and radius settings in order to work with clear edges. This showed that, in addition to the classic 90\u00b0 angles, 135\u00b0 angles are also a good compromise: on the one hand, they create sufficient freedom in the design and, at the same time, allow as much space as possible to be used within the icons thanks to the open angle.<\/p>\n

\"Figma<\/p>\n

I deliberately limited myself to only two angles in the line design \u2013 90\u00b0 and 135\u00b0. This design limitation creates clear parameters and ensures an open, recognizable design language. However, I had to rethink some existing symbols because they no longer functioned as usual in this reduced language. A good example is the icon for \u201cusability testing\u201d: our classic magnifying glass looked more like a stop sign due to the flat angles. So I extracted the original core element \u2013 the video camera for recording usability tests \u2013 and reinterpreted it as an overarching symbol. I applied the same principle to the game controller (for the \u201cGamification\u201d service): the formal restrictions made it much less recognizable, which is why I initially opted for the \u2018trophy\u2019 as a motif, but ultimately chose the \u201cjoystick\u201d to convey the message behind the icon more clearly.<\/p>\n

Automatically generate radiuses<\/h2>\n

Figma is well suited for designing icons because it is vector-based, allows for easy scaling, and facilitates SVG export. Practical functions such as snap-to-pixel and grid help you work with pixel precision. When working with contours, you can specify whether corners and line ends are displayed sharply or rounded. I took a closer look at these settings because in 3D visualization, all corner points are replaced by curves, which results in softer curves.<\/p>\n

\"Figma<\/p>\n

My conclusion: The radius settings in Figma are limited\u2014especially when working with pixel precision. Although the outer radius is always displayed, the inner radius remains sharp up to a value of 1.5. Only at higher values does a slight rounding appear at the inner corners, but this would not correspond to the look of a conveyor belt.<\/p>\n

\"Figma<\/p>\n

A seemingly obvious solution would have been to convert all contours into outlines and draw the inner radius manually. However, from the outset, a 100% automated solution was preferred\u2014ideally without sacrificing the stroke structure of the icon. All that was needed was to turn one corner point into two points connected by a B\u00e9zier curve. Of course, this conversion had to be done equally for each corner. The logical consequence: we wrote a script that performs exactly this task.<\/p>\n

I used DrawBot<\/a>, a free app that lets you create two-dimensional graphics using simple Python scripts, to automatically draw the icon coordinates. I replaced each existing single corner point with two new points using a corresponding function and then connected them with a Bezier curve that creates the radius. This allows me to adjust the distance between the points to change the curvature while keeping the line thickness constant. DrawBot shows me the result immediately, so I can visually adjust the radius to match the 3D visual.<\/p>\n

Automation of icon creation<\/h2>\n

\"Figma<\/p>\n

To keep the icon creation process streamlined in the future, we have decided to use a workflow automation engine to run the Python script for automatically generating the final SVG.<\/p>\n

Designers should still be able to design new icons in Figma, while the exact radii are generated automatically \u2013 similar to the exact curve segments in the 3D conveyor belt. The icon created in Figma serves as the basis for both processes.<\/p>\n

Icon font with Markdown feature<\/h2>\n

\"icon<\/p>\n

In addition to using the icons as strokes in Figma files, the icons are also available as a standalone font. Smart OpenType features allow the icons to be used in text: when you enter the keyword or icon name in Markdown style between two colons, it is automatically replaced by the corresponding symbol \u2013 wherever basic ligatures are supported (e.g., in Figma, InDesign, or Word). Alternatively, the symbols can also be accessed via their Unicode value.<\/p>\n

The icons are designed in different stroke weights and can be interpolated variably. This allows them to be adjusted from light to bold using a slider and the stroke weight of the icons to be dynamically adjusted, for example for CSS hover animations.<\/p>\n

Premiere of our toolbox landing page<\/h2>\n

To kick things off, we had the opportunity to give a presentation at Bosch and showcase our tool with its new icons and 3D visuals for the first time. For the demonstration, we developed our own GOMS analyzer, which can be used to evaluate current screen designs based on a defined task description. A GOMS analysis allows us to predict how long an experienced user will need to complete a given task in a user interface.<\/p>\n