Mastering protocol icon overrides is the technical practice of structuring icon components within a design system so that color and style changes persist when swapped. In modern UI design tools like Figma, failing to set up this strict protocol causes nested icons to break. They revert back to their default colors whenever a designer changes an icon size, state, or glyph.
The layout below highlights common structural frameworks used to maintain icon properties during instance swapping: The Core Problem: Why Overrides Break
When you swap an icon inside a parent component (like a button), the tool reads the underlying code structure. If the old icon and the new icon do not match structurally, the software drops your color override and reverts to the default asset fill. The Strict Protocols for Perfect Overrides 1. Identical Layer Naming Protocol
Single Vector Name: Every single icon component in your library must use the exact same name for its inner vector layer.
The “Union” Standard: Use a generic layer name like Vector, Union, or icon.
Avoid Auto-Names: Never leave names like Path 1 or Vector 42 generated by automated SVG imports. 2. Structural Layer Matching Protocol
Equal Depth: The layer hierarchy must match across all components. If one icon is grouped inside a frame, all icons must be grouped identically.
Flatten Multi-Layers: Combine multi-layered icons into a single compound path or Boolean Union group.
One Layer Target: Ensure the system only has one visible vector layer to target for overrides. 3. Bounding Box & Sizing Protocol
Standardized Frame: Place every vector shape inside an invisible, square bounding box (e.g., 24x24px).
Constraints to Scale: Set the inner vector constraint rules to Scale / Scale. This ensures the shape scales correctly when the outer container changes sizes.
Remove Direct Fills: Keep the default parent wrapper transparent. Do not apply your design tokens directly to the base asset layer. 4. The Advanced “Union Hack” Protocol
When handling third-party icons with wild, unpredictable vector geometry, utilize the union trick: Select all shapes inside your master icon frame.
Click Union Selection to force them into a singular vector mask. Rename that union layer to color_fix.
Apply your color styles strictly to the union level to preserve consistency across your entire component library. Benefits of Overrides Mastery How to preserve icon color override and size? – Figma Forum
Leave a Reply