Designing a Consistent Icon System for Multiple E-commerce Websites
A well-designed icon system can have a significant impact on both user experience and interface consistency. While icons may seem like a small detail, they play an important role in navigation, interaction, visual hierarchy, and brand recognition.
During my time at Asendia Press Edigroup, I worked on the design and implementation of pictograms for several e-commerce platforms, with the goal of creating a consistent visual language across different websites while also improving display performance.
Designing a Consistent Pictogram Language, See user case
The first challenge was to create a coherent set of pictograms that could be used across the different websites.
The icons needed to be:
- Simple and immediately understandable
- Consistent in terms of proportions and visual weight
- Adaptable to different screen sizes
- Compatible with responsive interfaces
- Easy to integrate into different UI components
- Consistent with the overall visual identity
Rather than treating each icon as an isolated element, I approached the pictograms as part of a broader UI icon system. This helped create a more consistent experience across the different digital platforms.
From SVG to Icon Font
Once the pictograms had been designed as SVG files, the next step was to optimize how they were used within the interfaces.
Instead of loading individual image files for every icon, the SVG pictograms were converted into an icon font.
This approach made it possible to use icons directly as typographic characters within the interface.
For example, an icon could be implemented through CSS rather than loading a separate image file for every occurrence.
This offered several advantages:
- Fewer individual image requests
- Easier integration into buttons and navigation elements
- Consistent rendering across components
- Easy control through CSS
- Simple scaling without creating multiple image sizes
- Better integration with responsive layouts
The icons could also be resized using standard CSS properties, making them particularly suitable for responsive interfaces.
Designing for Different Screens
Responsive design was an important consideration.
The same interface could be displayed on:
- Desktop screens
- Laptops
- Tablets
- Smartphones
- High-density displays
Using an icon font made it easier to maintain consistent proportions and sizes across these different environments.
Unlike raster images, the icons were not dependent on a predefined pixel size. They could scale with the interface while remaining sharp.
This was particularly useful for navigation icons, search, account, shopping cart, arrows, and other recurring UI elements.
Performance and User Experience
Performance is an important part of UX.
A visually attractive interface is not enough if users have to wait for unnecessary assets to load.
Replacing multiple small image files with a reusable icon font could help reduce the number of individual assets requested by the browser and simplify the way icons were managed.
It also made the icon system easier to maintain. Instead of managing dozens of separate image files throughout different interfaces, the icons could be managed as a centralized library.
The result was a more structured approach to icon management, combining visual consistency, scalability, and performance considerations.
Creating a Reusable UI Asset
One of the most important lessons from this project was that icons should not be considered purely decorative elements.
They are part of the interface’s visual language.
A well-designed icon system can help:
- Improve recognition
Users can quickly identify familiar actions such as search, navigation, account access, or shopping cart. - Create consistency
Using the same visual rules across multiple websites creates a stronger and more coherent experience. - Support responsive design
Icons can adapt easily to different screen sizes and UI components. - Simplify development
A centralized icon library makes implementation and maintenance easier. - Improve scalability
New icons can be added to the system without redesigning the entire visual language.
From UI Design to Implementation
This project illustrates an important aspect of UX/UI design: design does not stop at the visual interface.
The way visual assets are technically implemented can directly influence the user experience.
By combining pictogram design, SVG optimization, icon font conversion, CSS implementation, and responsive design principles, the objective was not simply to create attractive icons.
The objective was to create a reusable and efficient visual system that could support several digital platforms.
For me, this is an essential part of Product Design: thinking about the complete journey from design concept → UI system → technical implementation → user experience.
Conclusion
A good icon is easy to overlook because it feels natural when it works well.
But behind a consistent icon system are many decisions about geometry, readability, scalability, accessibility, implementation, and performance.
The work carried out for the different Asendia Press Edigroup websites was a good example of how a relatively small UI component can become an important part of a broader Design System and UX strategy.
Good UX is often found in these details.