Icon Request: Lightning Circle

[CypherPoet]

I feel like it would be useful to have a Lightning Circle a la the Bitcoin Circle icon.

(Furthermore, there’s currently a bolt-shaped icon named “lightning”, (perhaps as a result of #3?) but it doesn’t seem to completely match the conventional shape used in lightning network visuals)

FWIW, I actually have a version of this ready to go in my own Illustrator file...

... and I’d love to tackle this issue as a way to get familiar with contributing to the project and its end-to-end process of creating and distributing icons 💪

[GBKS]

Thanks for your interest in helping out. A lot of UIs use icons in circles, squares and rounded squares, but I think those frames are best rendered natively and not part of the icon. This keeps the icon set simple, and allows for more programmatic control (e.g. different colors for the icon shape, the frame, and the background, border radius, relative sizing, etc).

As far as the shape, it's based on the grid that also shown on the site. We try to keep all points and lines on the grid to get better overall visual consistency.

If you'd like an intro to creating icons, I can walk you through the details sometimes. It's surprisingly complex because the export process from Figma to SVG is so fragile. Lots of small things to consider, like only using center alignment for borders.

For new icons, we've done two things so far. One was to review well-known bitcoin applications and include icons that we found were used repeatedly. And second, by requests here in the issues.

Hope that helps.

[CypherPoet]

Hey @GBKS -- thanks for the info!

I’m mainly interested in the creation process and flow that’s used for the project.

I’m familiar with designing icons according to a grid system (Illustrator is my personal go-to, but I’m familiar enough with Figma as well 🙂) but I wasn’t quite able to understand how things are spread out here across Figma and all of the various directories with NPM scripts.

Regarding Figma, the file appears to have a number of different pages in various states of progress. Is the idea to add an icon to one of the pages there, and then run some kind of script (or set of scripts) to generate it everywhere else?

[GBKS]

Gotcha. So it's a bit complicated unfortunately. For new icons, either someone submits an idea, sketch, or design (Illustrator, Figma, etc) or Bosch and I will create it. We pretty much always have to recreate it in Figma to ensure it fits the grid and the various export restrictions (centered borders, no masks, simplified shapes...). The export from Figma to SVG is incredibly sensitive, so it always take some fiddling and testing to ensure it looks correct in browsers and that the SVG code is clean. For this export, I created a custom Figma plugin that automates some of this process. The plugin iterates over the selected icon frames, duplicates them on a new page, adjusts export settings, and then goes over every single shape in them to delete hidden files, flatten combined vectors, etc. Then I can easily hit the export button to get the actual SVG files. Then follows the release process, which starts with browser testing to ensure they look right (common issue, for example, is that a filled icon still has an outline somewhere), and then publishing the various modules.

A bit absurd how complex it is to publish a few icons. It was fairly simple at the beginning, but then got more complex as people wanted to use the set in different ways for their projects.

Did that help?

[GBKS]

Here's an update on the icon. Since all the icons should go well together, I included all additions in this milestone. Very simple, just the lighting bolt we already have inside of a circle. How does it look?

[GBKS]

The icon is now live with the latest 0.1.10 release. You can use the icon set via:

• Download SVG and PNG files via the latest release
• The Figma plugin
• The Vue module
• The React module

bitcoinicons.com is also up-to-date. Thanks for your suggestion.