Add a consistent status circle on any existing svg file

There are many nice icons around in svg format but all too often you do not find them with variants for on/off state. Or if you do, your icons can be made by different creators using different indicators. Here I will illustrate a very very simple method to add a red dot and a green dot on any existing svg file.

Fact: did you know svg file is just a XML file you can open in any text editor?

Lets take a look to this Netflix icon

netflix

Then consider this code opening netflix.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
 <path style="opacity:.2" d="m4 56v2c0 1.662 1.338 3 3 3h50c1.662 0 3-1.338 3-3v-2c0 1.662-1.338 3-3 3h-50c-1.662 0-3-1.338-3-3z"/>
 <rect style="fill:#4f4f4f" width="56" height="56" x="-60" y="-60" rx="3" ry="3" transform="matrix(0,-1,-1,0,0,0)"/>
 <path style="opacity:.1;fill:#ffffff" d="m7 4c-1.662 0-3 1.338-3 3v1c0-1.662 1.338-3 3-3h50c1.662 0 3 1.338 3 3v-1c0-1.662-1.338-3-3-3h-50z"/>
 <path style="fill:#d44338" d="m36 12h8v40l-7.8422-1.0526z"/>
 <path style="opacity:.2" d="m20 13v40l8-1v-39z"/>
 <path style="fill:#d44338" d="m20 12v40l8-1v-39z"/>
 <path style="opacity:.2" d="m20 13l16.156 38.949 7.844 1.051v-1l-7.842-1.053-0.154-37.947h-0.004l0.082 20.203-8.082-20.203h-8z"/>
 <path style="fill:#ff695e" d="m20 12 16.158 38.948 7.842 1.052-16-40z"/>
</svg>

Now add just this line before the closing tag and save it as netflix-stop.svg

    ...
    <circle fill="#e60000" stroke="#b30000" cx="52.3" cy="52.3" r="5"/> <!-- Red circle -->
</svg>

Do the same for green and save it as netflix-play.svg

    ...
    <circle fill="#29a329" stroke="#196619" cx="52.3" cy="52.3" r="5"/> <!-- Green circle -->
</svg>

as new user I cannot post the result image (limited to one so just try and see the result yourself

And done! If you want the same simple indicators on more existing icons, just copy and paste the oneliner and all your indicators are 100% consistent throughout.

Of course you can change the radius and positions to your own liking.
You can of course look up any small existing svg source and grab some indicator from there.

Have fun!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.