/sketch-iconfont

This plugin helps you easily insert and manage icons from icon fonts.
  1. JavaScript 100.0%
JavaScript

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP
Find file
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
iconfont.sketchplugin/Contents
.gitignore
HELP.md
README.md

README.md

Latest Version Join the chat at https://gitter.im/keremciu/sketch-iconfont

Its a nice plugin to use icon fonts in Sketch for developers and designers.

Big Update: You can add an icon with one click.

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

Update: It works with 3.4.1 now. I've changed menu of the plugin, its really useful now. You can see the name of icon when mouseover the icon, it has tooltip.

And also thanks to @bricklife.

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

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

  1. You can install 'Sketch Iconfont' plugin directly.

manual

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

Problem

It's not working with sketch beta. Because sketch beta is not supporting NSFont.

Next Steps

  • I'd like to add a search area in "add icon with list" command to easily find an icon.
  • 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.

Note

I've started to develop this plugin after https://github.com/keremciu/sketch-use-fontawesome this plugin. I'd like to add more icon font support. If you want to use a different icon font, you can create an issue about it. I hope you like it :)

License

MIT