Best practice to make an icon as exportable in the sketch

In Sketch, there are many ways to export icons. This article will give you an idea of the best approach to the export icon from Sketch.

Lets export this champion icon & medal icon (Fig: 01)

There are 3 possible ways of exporting the above icons. They are given below.

Option 1:

Just mark the whole content(with background circle) as exportable

Exported with the background (Fig: 02)

Option 2:

Export only the actual icon (without the background circle).

Exported icons only (Fig: 03)

Note: Since the white colour icon is not visible, so I have change it to coloured.

Option 3:

Export icon with transparent background (without background circle i.e, the blue colour)

Exported with transparent background (Fig: 04)

Note: Since the white colour icon is not visible, so I have change it to coloured.

Recommended Approach

Option 3 is consider as a best approach, because it helps us to get the actual icon to be used in the deliverables without much customisation to be done on the placements. The advantage of going for this option is the ability to change the background colour dynamically with the help of CSS .

Possibilities of customisation with transparent images

Possibilities of using transparent images. (Fig: 05)

What’s wrong with option 1 & option 2?

If we go with option 1, we are restricted to use the given background colour and shape (only circle).

Option 2, more customisation is required for the each and every icons based on their structure. In some cases, it is recommended for using SVG code in web.