Home

Below is a guide to creating icons for this project that maintains a consistency.

The software used in this guide is Sketch for Mac.

You will need some experience and understanding of design, or Sketch to be able to make these I'm afraid.

Creating your icons

There are four variants of each coin, but it doesn't take any time at all to create them all once you have your first one done. I always start with the color variant.

If you want to add an icon for your coin, you need to have a vector version of your logo. If you can’t find an SVG version of it online, then you'll need to draw it. Bitmap versions won't work because you cannot create the transparency required for all variants, nor will you be able to export it as an SVG properly.

Here are rough steps that I do to create each icon:

• Start with the color variant, import the logo I want to use in Sketch
• Copy and paste that logo into the document with the icons
• Determine the main color of the logo and then apply that to the circle background. (I'll select the circle and press Control-C to bring up the color picker)
• Next, I'll select the logo/glyph and press Scale in the toolbar. I'll make either its height or its width 20px and press confirm
• Cut-and-paste the logo into the middle of the colored circle
• I may adjust its position a little better to optically center it rather than mathematically. For some logos, I may need to choose Scale again and make it 18px at its largest side, or even 22px if it is a circle

Next, I'll move on to the Black and White icons

• I'll take the 'finished' Color icon and duplicate it
• Then select both the circle and the logo then press Subtract in the toolbar
• Depending on how complex the logo is, I might need to tweak it somewhat in the Layer List by changing the order and operations of some sub-paths
• Change the color of the icon to Black
• I'll then copy-paste this into the next Artboard and make it white

Finally for the icon variant

• I'll duplicate the Color icon, and then select the oval layer and do the following:
• Hold the Command key and press the up arrow twice
• Then nudge the layer to the right by pressing the right arrow key (not holding Command)
• Apply the layer styling to the layer by selecting the oval icon above, by selecting the oval layer and pressing Option-Command-C to copy the style
• Select the oval layer I want to apply it to, and press Option-Command-V to paste the style
• Still with the layer selected, press Command-C to pick the color used on the Color version to apply it underneath the gradient
• Finally, I'll nudge the logo up 1px by pressing the up arrow to re-center it and then apply the "Shadow" layer style to it.

That's the first part over.

Exporting

To export the icons, you need to first make sure the Artboards are correctly named. Say we're making a Bitcoin icon, the four Artboards should be called icon/btc, color/btc, black/btc, and white/btc respectively.

I'll use CoinMarketCap as a reference for all ticker codes.

If I'm making a lot of icons in one go, I'll use this Rename-it plugin for Sketch which allows you to Find and Replace on multiple selections.

All four icons should have the following Export presets applied. This means you can export the multiple sizes that are in this project in one go.

Just copy the same in the Preferences, and then you can apply them in the bottom right of the Inspector.

Once done, that's it. You're ready to export. You don't need to create any extra folders because that'll happen automatically due to the / in the Artboard name.

Additionally, you can compress the images or optimize the SVGs with ImageOptim (Make sure svgcleaner is not enabled as it ruins the icons) or SVGO.

Committing

Once you've exported all the icons to the right folders on the repo, you need to update the manifest.json with the ticker code of your coins added. And add the original SVG logos to the originals folder.