Design system icon opacity.

Common tokens: 100 percent active, 70 hover or focus, 45 disabled, 15 decorative or placeholder. Write them down in the system and apply them to every icon.

Consistently: icon-name-100.png, icon-name-70.png, icon-name-45.png, or by state, icon-name-active and icon-name-disabled, following the team's asset naming.

Generated variants are the same everywhere, including email, legacy systems and native apps, and can't be overridden. CSS opacity is fine for web-only work. Generate when the result must be guaranteed.

Document the levels, then process the icons one level at a time, with a checklist so every icon gets every state.

A disabled icon at 45 percent may fail contrast on purpose; it is meant to look inactive. Say so in the markup too, with aria-disabled, not only by opacity.

Export the PNG variants here and import them into the design tool as assets linked to the opacity tokens; some teams make component variants that apply the tokens.

The browser draws the SVG to pixels at the size it declares (its width and height, or its viewBox), and the tool works on those pixels. The result is a PNG, not an SVG: for a larger output, set a larger width and height on the SVG first, with the SVG editor.

No. The file is read and drawn by your browser, and the page makes no request with it. You can load the page, go offline and keep working; nothing is stored either, so reload and it is gone.

No. The "Design system icon opacity" tool is free and opens without a sign-in, an account or an install.

Nothing. The "Design system icon opacity" tool holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

No, it takes one file at a time. If you drop or choose several, only the first is used; run the tool again for the next one.

The edit is written as a PNG because PNG stores every pixel exactly, with a full alpha channel, so the result can be edited again without a second round of loss.

No. The browser decodes the image and the tool writes a new file from its pixels, so camera EXIF, GPS position and text chunks in the original are not copied into the result. Keep the original file if you need them.

No. The result has the same width and height in pixels as the source.

Closest to the "Design system icon opacity" tool: SVG opacity changer, Icon transparency generator, Unify icon set colors, Recolor SVG icons. Each opens on its own page, free and in the browser.

The "Design system icon opacity" tool is one of 45 in its group. The group's page, /tools/svg, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.