March 7, 2026

Summary

A large, content-managed website required a consistent and scalable way to generate and manage featured icons for its commercial service catalogue. With a portfolio numbering in the hundreds of pages, services, and categories, the existing manual process for creating and naming assets was becoming inefficient and difficult to govern.

Challenge

The core challenge was to replace manual icon handling with an automated, reliable system. This system needed to address several key issues:

• Scalability: The process of manually creating and naming hundreds of individual icons was not sustainable and was prone to human error.
• Consistency: All icons needed to conform to a strict standard of 512×512 pixels in a transparent PNG format.
• Governance: Asset filenames had to be stable and deterministically linked to an external content model. This would prevent broken image links as the website and its underlying data evolved.
• Security: Using vector graphics (SVGs) sourced from third-party libraries directly on a website introduces security risks, such as the potential for embedded scripts.

Objectives

To address these challenges, the primary objective was to design and build a self-contained, automated asset generation pipeline. The key goals for the project were to:

1. Automate the creation of a complete icon set from a source vector library.
2. Enforce strict standardisation of the output format, dimensions, and naming conventions.
3. Implement a deterministic build process that was repeatable and auditable.
4. Integrate a security-first sanitisation step to handle all source graphics as untrusted content.
5. Decouple the asset generation workflow from the main website to allow for independent maintenance and updates.

Approach and Delivery

An automated pipeline was developed as a standalone Node.js utility, designed to be executed via simple command-line instructions. The approach was broken down into several distinct, scriptable stages:

1. Selection & Planning: The process began by reading a version-controlled text file that mapped the required assets to source icons from the Lucide library. This input file supported overrides for deterministic icon selection.
2. Staging: Before processing, the tool generated a JSON plan and a report, creating a clear audit trail of the work to be performed.
3. Execution: The pipeline then fetched the source SVGs from the Iconify API, sanitised them, and rendered the final PNG assets.
4. Reporting: Upon completion, the utility emitted manifest artefacts to confirm which assets had been created successfully.

The entire workflow was wrapped in repeatable npm scripts, making it simple to execute a clean build on demand or integrate it into a wider CI/CD process.

Technical Implementation

• Platform: The utility was built as a private Node.js ES Module project.
• Source Icons: The pipeline used the open-source Lucide icon set, retrieved programmatically via the Iconify API.
• Rasterisation & Optimisation: The Sharp library was used for high-quality rasterisation, converting the source SVGs into the target 512×512 PNGs. The SVGO library was used for preliminary optimisation of the vector graphics.
• Security Sanitisation: A critical step in the pipeline involved treating all incoming SVGs as untrusted input. A robust sanitisation process stripped potentially harmful elements, including scripts, <iframe>, foreignObject, inline event handlers, and unsafe href values. A final assertion pass verified that all banned patterns were absent before the asset was rendered.
• Workflow & Configuration: The pipeline was controlled through npm entry points (clean, build, etc.) and supported configuration, such as custom colours, via environment variables. It also cached downloaded SVGs to improve the speed and reliability of subsequent runs.

Outcome

The project successfully delivered a fully automated asset generation pipeline that met all objectives.

• Automation: A complete set of 139 standardised, 512×512 transparent PNG icons was generated automatically.
• Efficiency: The pipeline eliminated the need for manual icon handling, reducing operational overhead and the risk of human error.
• Governance: A deterministic link was created between the external content model and the visual assets through stable, predictable filenames, enabling downstream consumers to rely on stable asset names.
• Security: The security posture was significantly improved by sanitising all third-party vector assets and delivering safe, non-executable PNGs to the web front-end.

Risks, Controls and Governance

• Risk: Ingesting third-party SVG assets could introduce malicious scripts into the build environment or website.
• Control: This was mitigated by implementing a strict sanitisation-first workflow. All SVGs were treated as untrusted content and stripped of unsafe elements, with a final verification step ensuring compliance before rendering.
• Risk: The upstream icon API could become unavailable, breaking the build process.
• Control: The pipeline was designed to cache downloaded SVG assets locally. This ensured that builds could be run consistently and repeatably, even if the external API was temporarily offline.
• Risk: Unintended changes to the asset list could occur without a clear audit trail.
• Control: The build process was driven by version-controlled text files and generated manifest reports, providing transparent, reviewable governance over the entire asset library.

Key Lessons

• Asset Pipelines Improve Quality: Treating asset generation as a dedicated, automated engineering pipeline is essential for maintaining quality, consistency, and security at scale.
• Sanitise External Graphics: Vector graphics from any third-party source should be treated as untrusted by default. A rigorous sanitisation process is a critical control to prevent security vulnerabilities.
• Deterministic Builds for Governance: Manifest-driven, deterministic build processes provide the necessary governance to keep different parts of a system aligned, such as a content model and its corresponding visual assets.

Related Services

• Backend API Development (FastAPI/Node)
  Design and build backend APIs with clear contracts, secure authentication, observability, and cloud-ready deployment using FastAPI or Node.js.
• CI/CD & DevOps Enablement
  Implement CI/CD pipelines with automated builds, controlled deployments, and release discipline that improves reliability, security, and delivery speed.
• Asset Management & CMDB Build
  Design and deploy asset management and CMDB capability delivering accurate visibility, lifecycle tracking, and governance to support ITSM operations.
• Frontend Engineering (React/TypeScript)
  Deliver React and TypeScript frontends focused on performance, accessibility and maintainability through component systems, clean architecture and integration ready builds.