HexiQnix

Context

Managing multiple SVG icons for large scale projects can be a repetitive task. I needed a tool that could simplify the integration of custom icons with CMS systems while providing a clean and organized way to work with them.

Problem

Working with SVG icons often requires manual adjustments. Developers frequently need to modify path settings, adjust fill or stroke colors, rename files to match conventions and format the code into XML for specific content management systems. Doing this manually for every icon is time consuming and prone to errors.

Solution

I built HexiQnix, a web application designed to convert SVG files into XML format. The app allows users to upload an SVG file or paste raw code directly into the editor. It includes advanced editing options to modify fill color, stroke color and advanced path settings like fill rule or clip rule.

With the release of Version 2, the application received a major transformation and usability overhaul. The manual convert button was removed in favor of real-time conversion. The code section now updates automatically whenever an input or setting is changed, providing instant feedback and a smoother workflow.

A new dedicated transformation panel was introduced to provide fine control over visual geometry. Users can rotate their icons, easily adjust width and height dimensions or quickly flip the icon horizontally and vertically. The V2 update also brought a custom preview background to test contrast against various themes and a new implementation for generating ready-to-use CSS code.

Users can also rename their icons, generate the required XML format and copy the code instantly. To make managing multiple icons easier, I implemented a feature to save edited icons within the app. These are stored in a grid that enables users to compare, organize and reuse them for other projects. The application includes a live preview for visual feedback, custom notifications and built in error handling to prevent mistakes.

Outcome

HexiQnix successfully streamlined the process of preparing SVG icons for CMS integration. The tool eliminates manual formatting tasks, provides a reliable environment for icon management and significantly speeds up the workflow when handling custom graphics in enterprise projects.

You can try the live web application here: HexiQnix V2 Web App