Use icon fonts like a boss in Sketch!

=======

Update: 5 December

The codes rewritten, you can read them easily. Soon custom-iconfont support is coming.

Update: You can search an icon in grid view.

https://pbs.twimg.com/tweet_video/CTKBEtoUwAQ3DC0.mp4

(sorry for bad quality, I'll add a video gif)

Now it supports font awesome, material and ion icons but sure, I would like to add more. Maybe we can create a custom icon font uploader, it would be so cool.

Demo

Features

A Problem of the Designer: When you want to add an icon from icon fonts, you don't need to find a cheatsheet to copy it in your design.

You can easily add it now in sketch.

A Problem of the Developer: When you want to learn name of the icon which is added from a designer, you don't need to look too much icons to find it.

You can easily learn it now in sketch.

Dependencies

You need to install icon fonts to your OS:

For fontawesome: https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/FontAwesome.otf

For ion icons: https://github.com/driftyco/ionicons/raw/master/fonts/ionicons.ttf

For material icons: https://github.com/google/material-design-icons/raw/master/iconfont/MaterialIcons-Regular.ttf

Install

with Sketch Toolbox

You can install 'Sketch Iconfont' plugin directly.

manual

Download ZIP of this repo.
Extract and rename folder to what would you like.
Put the folder in your Sketch plugin folder (Use Plugins > Reveal Plugins Folder to find the plugin folder).

Next Steps

~~- I'd like to add a search area in "add icon with list" command to easily find an icon.~~ Added.

I'm trying to build a svg icon font parser to use custom icon fonts in sketch.

You can follow me on twitter to get updates about new icon fonts.

License

MIT