SVG Overrides#
SVG overrides let you change the visual appearance of any SVG icon — stroke width, stroke color, and fill color — without modifying the original file. Overrides are applied in real time in the preview and are included when you drag or export the icon.
Accessing Overrides#
Select any SVG icon. The SVG Overrides section appears at the top of the inspector panel, above the other metadata fields.
SVG override controls are only shown for SVG icons. They do not appear for PNG, PDF, or other raster formats.
Stroke Width Override#
Enable the Stroke Width toggle to scale or replace the stroke width of all stroked paths in the SVG.
Units#
| Unit | Behavior |
|---|---|
| % | Scales the original stroke width by the given percentage. 100% = unchanged. 200% = double. |
| px | Replaces all stroke widths with a fixed pixel value. |
| pt | Replaces with a fixed point value (1pt = 1.333px at 96 DPI). |
| in | Replaces with a fixed inch value. |
| cm | Replaces with a fixed centimeter value. |
| mm | Replaces with a fixed millimeter value. |
Percentage mode is the most useful for icon sets: it scales whatever stroke widths the original SVG uses, so a mixed-weight icon retains its proportions while getting uniformly bolder or thinner.
Fixed units replace all strokes with an exact value, which is better when you need pixel-perfect consistency across icons with different original weights.
How It Works#
Icophony walks the SVG element tree and updates stroke-width in both XML presentation attributes and inline style attributes. Elements that inherit a stroke from an ancestor but don’t declare their own stroke-width also receive the override, so the effect applies to the whole icon.
Stroke Color Override#
Enable Stroke Color to replace the color of all strokes in the SVG.
Click the color swatch to open the color picker. The opacity slider controls the stroke’s alpha independently.
The override replaces stroke and stroke-opacity in all elements that have a non-none stroke, whether set as XML attributes or inline style properties.
Fill Color Override#
Enable Fill Color to replace the fill of all filled shapes.
Click the color swatch and set opacity as needed. The override applies to elements with a non-none fill. Shapes with fill="none" are left untouched (e.g., hollow shapes that rely on a stroke for visibility).
Persistence#
Override settings are saved to your Mac’s preferences and persist across icon switches and app restarts. The same override state applies when you switch between icons — this makes it easy to preview a whole collection at a consistent stroke weight or color.
To reset, disable each toggle or close and reopen the controls.
Export Behavior#
When you drag an SVG icon to another app or export to IconJar/backup, active overrides are baked into the exported SVG:
- Stroke widths are written with proper unit suffixes (e.g.
stroke-width="1.5in") in exported files. - Colors and opacities are written as standard SVG attributes.
The original icon data in Icophony is never modified. Overrides are always computed on export.