An SVG icon arrives in the wrong colour. You can change the colour in its source and keep the shapes editable, directly on an Android phone. This example uses SVG Editor, Viewer & Animator by Cosmovex and a small SVG you can copy.
Start with a simple icon
Copy the example below into the app's SVG code editor, or save it as status-icon.svg and open the file. It draws a green circle with a white check mark.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="48" fill="#1F6B45"/>
<path d="M36 61 L52 77 L84 43"
fill="none" stroke="#FFFFFF" stroke-width="9"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Keep a copy of the original before editing an icon you need for a project. With this example, the circle and the check mark are separate elements, so you can change one without changing the other.
Change the circle colour
Find fill="#1F6B45" on the circle line and replace it with fill="#B3261E". The circle becomes red; the check mark remains white. Check the app's preview as you edit.
For shapes, fill controls the paint inside the shape. The check mark instead uses stroke for its visible line, with fill="none" to leave its interior unpainted. Changing only its fill is therefore not the way to recolour that white line. MDN explains SVG fill and its relationship to CSS.
To make the check mark dark, change its stroke value to #1B1F23. Keep the quotation marks and closing tags intact. If the preview disappears, undo the last edit and check for a missing quote or bracket.
When an imported icon does not change
Real icons can put colour in several places. Check the specific shape you want to edit rather than replacing every colour in the document.
- An inline
style="fill:..."or a CSS rule can override afillattribute. - A shape with
fill="url(#...)"uses a referenced paint definition, such as a gradient; replacing it with one colour changes that effect. - An outlined icon may get its visible colour from
stroke.
The app also provides a visual inspector for selecting shapes and changing their attributes. The source example above is useful when you want to see exactly which value changed.
Save the version you need
Save an SVG copy when you want to preserve editable vector shapes. The app also offers PNG and JPG export for workflows that need a raster image. Choose the destination in Android's save dialog, then reopen the saved file to check it before sharing.
Basic editing is available in the ad-supported app. Optional paid upgrades cover additional features; vectorizer limits and cut-file export presets are separate from this simple colour-editing example. See the current Google Play listing for the app and purchase options.