1Set the target size
Width and height of the finished image in pixels. Only then can a file be chosen — the crop frame takes exactly this format, and the result comes out at exactly these dimensions.
2Choose an image
3Choose the crop
Could a visitor mistake it for a real photograph? When in doubt, choose the stricter level.
Writes the photographer or image source small at the bottom left, fixed into the image — it survives downloading and passing the file on.
Alternative text
Read out of the file itself. Nothing is uploaded and nothing is guessed about the picture — a browser cannot see what a photograph shows, so what is offered here is what somebody already wrote into the file, and the file name.
1Load a symbol
Choose an SVG file or paste the code. The XML header, comments and any script are removed.
2Assign roles
Choose a role, then click a shape in the symbol. The two colours are for the preview only, so you can see what you are changing — the finished SVG contains no colour, only the class.
Relative to a 24-unit grid, so the weight looks the same on every symbol. 0 restores the original weight. The colour of the outline comes from the CSS variable, not from the SVG.
Add once to the global stylesheet
In Class only mode the icons stay colourless without this block. With Class + inline HEX they render on their own — and this block still overrides them, because a CSS rule outranks a fill attribute. Either way, every icon colour on the whole website is then set by these two variables alone, without touching a single SVG.
:root {
--icon-color-primary: #123456; /* placeholder, match to the brand */
--icon-color-secondary: #789abc; /* placeholder, match to the brand */
}
.icon--mono { color: var(--icon-color-primary); }
.icon .icn-ci1 { fill: var(--icon-color-primary); stroke: var(--icon-color-primary); }
.icon .icn-ci2 { fill: var(--icon-color-secondary); stroke: var(--icon-color-secondary); }
The two stroke declarations
belong to the stroke weight: without them an applied outline would either be invisible or would
have to write a fixed colour into the SVG.