Icon request: Empty circle

[jtuchel]

It would be nice to have an "empty circle" icon :)

Some dummy usecases could be:

• The circle in a tic tac toe game
• An icon for remaining tasks in a todo app

[lcjury]

Please!!, It would be awesome to be able to use check-circle and circle icons to toggle statuses

[zefir-git]

Not sure many other people would need an empty circle for it to be added to the set.

@lcjury you could use a circular checkbox and put just the check icon inside, giving you a circle from the box (with radius and border).

In any case, here's ones I've just made:

outline

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>

solid

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2.25A9.75 9.75 0 0 0 2.25 12 9.75 9.75 0 0 0 12 21.75 9.75 9.75 0 0 0 21.75 12 9.75 9.75 0 0 0 12 2.25z" clip-rule="evenodd"/></svg>

mini

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" clip-rule="evenodd"/></svg>

Creating this was extremely easy. You can download any existing icon, e.g. arrow circle, check circle, minus circle, … and open it in Inkscape (free open-source SVG editor, works on Linux, MacOS and Windows). You can press F2 (or click it from the toolbar on the left) to enter path node editing mode. Now click and drag to select all nodes in the centre of the circle (i.e. the arrow, or minus, or whatever from the icon you downloaded) and press Del on your keyboard to delete it. And voila you have a circle icon.

Inkscape may generate some useless SVG code and params. You can optimise your SVG using SVGO (I believe heroicons are already optimised this way). You can even use this website named "SVGO's Missing UI" which lets you paste or upload any SVG and it will optimise it for you. You can then click the clipboard icon on the right to copy your SVG code or the download button to download it.

And an even simpler way is to just draw any SVG circle. This is extremely easy. You don't even need a program like Inkscape. You can just:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

You can easily write this by hand. MDN docs on <circle>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

In this example, you have a viewbox of 100x100 (square). And then you have a circle with a radius of 50 with its centre at the coordinates (x, y) = (50, 50). You can tweak this numbers to create any sort of circle.

With that said, I really don't think this should be added and anyone (even without finding this discussion) can easily create a circle SVG without any effort or experience. In fact, it took me longer to write all this than to create the 3 SVGs I included here.

[ndri]

I added icon-name to Sidekickicons, which are meant to be used as a companion to Heroicons. Browse them here: https://sidekickicons.andri.io/?icon=circle