How to how to enforce brand color consistency across svg icon libraries
- Step 1Audit unique colors across your icon library — Run all SVGs through the JAD Color Swapper's analysis mode. It produces a unique-colors.json listing every hex value found and how many SVGs use it.
- Step 2Map off-brand colors to brand tokens — Open unique-colors.json and identify any colors that are slightly off from your brand tokens (e.g., #003084 instead of #003082). Build a swap manifest correcting each one.
- Step 3Apply and enforce via CI — Run the batch swap and commit corrected SVGs. Add a CI lint step: svgo --config to validate that no SVG uses a color outside your approved brand token palette.
Frequently asked questions
How do slight hex variations accumulate in SVG libraries?+
Color pickers, different export settings, and manual edits all introduce slight variations. #003080, #003082, and #003085 might all be intended as 'brand blue' but differ by a few bits.
Can I integrate color validation into a Figma-to-code pipeline?+
Yes. After exporting from Figma, run a color audit script before committing. Fail the pipeline if any color in the SVG doesn't match a value in your approved brand token list.
How do I handle SVGs from third-party icon sets with non-brand colors?+
Run third-party icons through the swapper to replace their default colors with your brand tokens before adding them to your library. This normalises them to your color system.
What is a design token and how does it relate to SVG colors?+
Design tokens are named values for colors (--color-primary: #003082). SVG icons should reference your token values. The Color Swapper helps sync existing SVGs to your current token values when they're updated.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.