Give Your Components a Visual Identity with Custom Icons

When working on a project with multiple components, quickly identifying the one you need can save valuable time. The simplest and most effective way to make your components stand out in the Project Dependencies is to give each one a custom icon. 4D 21 R2 lets you visually distinguish your components at a glance, simply by placing a logo.png or logo.svg file in its Resources folder.

Providing a Custom Icon

When a component includes an image named logo.svg or logo.png, 4D automatically uses it in place of the default component icon. You can place this file in the Resources folder of the component

If the image is found in this location, it becomes the component’s visual identifier in the Component Manager.

Format Priority: SVG Over PNG

If a component contains both logo.svg and logo.png in the same folder, 4D always favors the SVG version. SVGs offer better scalability and sharper rendering at any size, making them the recommended choice for component icons.

Conclusion

These improvements reflect a broader objective: every 4D component should have a distinctive visual identity. Whether you’re distributing internal tools or sharing components with the community, adding a custom icon makes them easier to recognize and provides a more polished experience for all users.