keremciu/sketch-iconfont

This plugin helps you easily insert and manage icons from icon fonts.

New plugin

Hello everyone! I just created a totally new plugin to establish easier and reliable workflow. if you'd like to test out, it's here: https://github.com/keremciu/sketch-iconfont-web waiting for your feedback! :)

---

⚠️ BEFORE UPDATE: If you're using custom icon fonts, please export your font bundle like this: VIDEO then update the plugin, you can install the your custom-font-bundle without losing your custom fonts.

Dark Mode supports - 18 March 2019 (version 4.7.0)

• Adds dark mode support

Version 48 supports - 7 December 2017 (Version 4.6.0)

New version and release video is coming - 19 January 2017

• I took a video about import custom icons (VIDEO)

Version 41 supports - 9 November 2016 (Version 4.5.1)

• ColorWithSVGString method deprecated, I fixed it

Non-text layer selection problem fixed - 4 October 2016 (Version 4.4.2)

Problem here https://twitter.com/mwstrmnn/status/782979129780146178

New Features and Fixes - 17 August 2016 (Version 4.4.0)

Hey guys, I've fixed the problem with 3.91 version of Sketch.

Also we've new features like multiple text change, I will share gifs about them soon. Before sharing gifs, you can find and use them :)

First Install

First use? you need to watch (THIS VIDEO)

Please if you have an issue, first watch the video.

New Feature - Convert Command - 29 April 2016

Your teammates don't have your icon-fonts? don't worry now you can convert all icons with one command then share it.

Use Icon Fonts in Sketch

This plugin helps you easily insert and manage icons from icon fonts - such as FontAwesome, Ion or Material Design Icons - in your Sketch designs.

Use any icon font.

The plugin itself has no font built-in. You will need to download and install the fonts you wish to use directly from the font publisher. The most popular ones, however, have been put into a bundle which you can easily download from here: https://github.com/keremciu/font-bundles

=======

- Features

Why you need to use it

For The Designer: When a designer wants to add an icon from an icon font - such as material design, fontawesome, etc. - they usually need to find a cheatsheet containing all the font's icons, and then manually copy+paste each one they wish to use into their design - or use a third-party application. Time consuming and cumbersome.

• You can now easily view and add any icon directly Sketch!

For The Developer: When a developer wants to find out the name of an icon that was used by the Designer, they need to search through a lengthy list of icons, until they find it. Time consuming and cumbersome.

• You can now easily find out an icon's name directly in Sketch, without needing to perform a search!

=======

- Installation

Using Sketch Toolbox

1. Install 'Sketch Iconfont' plugin directly from Sketch Toolbox.
2. Install a font containing an svg font file, or install a font bundle - such as the one provided here: https://github.com/keremciu/font-bundles

Manually

1. Download and extract the ZIP bundle of this plugin from this repo.
2. Put the folder into your Sketch plugin folder (Use Plugins > Reveal Plugins Folder to find the plugin folder).
3. Install a font containing an svg font file, or install a font bundle - such as the one provided here: https://github.com/keremciu/font-bundles

=======

- Documentation

Its a little documentation about commands

Command	Description
Install a Font-Bundle	Install a newly downloaded font bundle.
Export your Font-Bundle	Export or backup all of your icon fonts previously installed. Recommended to use before you install new version of the plugin.
Install a Font	Install a newly downloaded font - containing an svg font file.
Remove a Font	Remove a previously installed font.
Grid Insert	Insert an icon by searching for it in a visual grid table.
Name Insert	Insert an icon by name.
HTML of Selected Icon	To use an icon on web or mobile, select it and use this command.

- Minimum Dependencies

• OSX El Capitan & Yosemite (#44)
• Sketch 3.4.4.

You can follow me on twitter to get updates. http://twitter.com/keremciu

License

MIT

=======

Donate

🍻

how about supporting my time-savers? if you'd like to buy me a beer, you can make it on PayPal then I can focus more on this stuff while having a beer 🍺 https://www.paypal.me/ciukerem

Old version

You can see an old version of this plugin here: http://i.imgur.com/EBGmlSe.gif - and you can download it from here: https://github.com/keremciu/sketch-iconfont/tree/oldversion

sketch-iconfont's Issues

Searching for an icon

I'm just wondering what meta data from the icon your plugin uses for search. For example, if I'm trying to find the github alt icon from Font Awesome, and I'm just having a tough time finding it in the grid insert modal, what do I search to find it?

• If I search "github", nothing comes up.
• If I search "fa-github-alt", nothing comes up.
• If I search "f09b", the icon's unicode, nothing comes up.

In your plugin, this particular icon is named "icon272". Where is that coming from?

Great plugin, by the way! I'd just love to be able to use the search feature.

Thanks,
James

Plugin issues with 3.4

Every time I try to use with 3.4 it's either causing Sketch to shut down or the plugin works once and then won't work again. I've redownloaded and reinstalled 3 times with no luck :(

check updates function will be added, readme and help files needs to be clean

I'm trying to add custom icon-fonts with this plugin. after that I will add a documentation in help.md file and I'll change the texts and gifs of readme file.

Nothing happens after clicking "add an icon from grid > Font awesome"

Nothing happens after clicking "add an icon from grid > Font awesome".
Sketch v3.4.2 and latest FontAwesome .otf installed.

Error in console is:

Sketch[59992]: Exception: TypeError: 'undefined' is not a function (evaluating 'searchbox.setPlaceholderString_(  "Search an icon...")')

Font Awesome (Sketch Plugin)[59992]: TypeError: 'undefined' is not a function (evaluating 'searchbox.setPlaceholderString_(  "Search an icon...")')
line: 424
sourceURL: /Users/X/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Sketch Iconfont/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript
stack: onRun@/Users/X/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Sketch Iconfont/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript:424:34
onFontawesome@/Users/X/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Sketch Iconfont/iconfont.sketchplugin/Contents/Sketch/add_icon_grid.cocoascript:355:8

Request: add Linea iconset

Request to add the Linea icon set from http://linea.io/ to the plugin.

Nothing happens after installation

So I installed the fonts from the font-bundles repository, the the plugin, then I launched Sketch and clicked on Plugins > Icon Font > Install a Font-Bundle. But after that, nothing happened.

I tried to quit/relaunch Sketch, still nothing.

Any idea? I'm using the latest beta: v3.5 (25125)

EDIT: I just tried again with the latest stable version and it's working.

Copy HTML isn't copying anything

When I click the Copy It buttons, it's not copying anything to my clipboard. See my screencast:

Add multiple icons at same time

Hi Keremciu,

The sketch-iconfont is a really good plugin. I use it everyday to add icons to my UI.

One thing I think it can be a enhancement here, when I add icon with the grid, I just can add one icon at once right? Then I need to open the gird again to add another one, so can I add multiple icons at same time? It can save much time for me, thanks.

Incompatible with Sketch 3.4

Isn't working with the latest Sketch Update. I've been able to place one icon upon document open, and then none of the commands work.

UI Improvements

Was a fan of your last plugin, so of course I'll be commenting on this one as well 😝

The current UI doesn't move. There is no way to drag that window. Anyway that could be possible?

Along with adding "Search" into this view, is it possible to either limit the number of selections (right now you can select multiple things) and only let people add one icon. Or what would be better, to be able to add multiple icons if you can select multiple.

Unable to load all icons

I tried to load those icon fonts without the bundle:

• ionicons
• font awesome

On OSX El capitan i download each icon set and:

• Installed the TTF file
• On sketch i installed the font selecting the SVG file.

Now i'm able to search icons but a lot of them are missing.
Looking at the Font Book app of OSX the icons are present.

An example is the "gear" icon from ionicons.

problem about search

I want to search a fontawsome name, but it doesn't make it. because the icons are named as something like icon100. I want to know how to deal with it .thank you !

Click outside of modal to close

close target is fairly small and subtle. Might be nice to add the ability to close the modal by clicking outside of it.

sketch v3.4.2 / problem adding icon

icons could not be added correctly to stage in sketch v.3.4.2.

FYI it works in Yosemite

Just wanted to let you know it works great in Yosemite 10.10.5
👍

Importing SVG icons broken?

I just imported a font, with a couple new icons that I've exported from Sketch, and generate an icon font from https://icomoon.io. Those new icons, are now showing up as question mark boxes in the plug-in, in Sketch:

Here's the icon font SVG file and the two icons, that are showing up like that:
Archive.zip

Thanks!

what is wrong with this？

as above
i can not see these icons

i have installed thsi：For fontawesome: https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/FontAwesome.otf

Not working after Sketch 3.8(.1) update(s)

I was using Sketch Use Fontawesome, but that stopped working after the 3.8 update, so I installed Sketch Icon Font font, but no matter what I do, I never get any options other than the install ones.

Placement of icons

In reference to #10:

I saw @damenleeturks talking about pasting icons in the center of the view (horizontally and vertically) - Will this be possible in the future? - I'm working with quite lengthy artboards and have to scroll quite a bit in order to grab the icons from the center of the artboard :)

Btw. I love the plugin!

Icons not getting added any longer

First, Thank You! This plugin was working wonderfully for me before. I think a recent sketch update may have caused this plugin to not work. It still opens, shows me a grid of icons, which I can select, but when I hit "+ Add/Change Icon" nothing happens.

Not working in Sketch Beta?

After installing the fonts on El Capitan, and then installing the bundle from Sketch Beta 3.5, nothing happens. The fonts palettes do not become available.

icons list empty

I've installed plugin however list of icons is empty.

Sketch 3.3.3
OSX 10.10.5

Weather SVG Font Rendering

I've attempted to install the following SVG font:

https://github.com/erikflowers/weather-icons

It follows the same html pattern as font awesome and appears to insert the character properly but in grid view doesn't display the icon preview. Just shows squares from a font called "Last Resort". Any way we can fix this?

Great plugin, btw!

Icon replacing other icon/text

If I add one icon and want to add another icons right after (without first deselecting the first icon), the second icon will replace/overwrite the first icon.

The same thing (obviously) happens if you got a textfield selected when adding an icon.

Sorry for the issues, @keremciu .

Search would be good

Search would be good

Symbols Issue

I added an icon font (font awesome) directly to the symbols page. Two problems.

1 - it landed in the space between symbols and now cannot be removed by any known method.

2 - It now appears on every artboard and cannot be removed by any known method.

Material icons don't render when using InVision Sync

In Sketch:

In InVision, synced through InVision Sync:

Great work on the plugin btw :)

only Material Icon is not converted to outline

Hi, I added 3 icons from FontAwesome, and 1 icon from Material, but when I use the plugin, only the FontAwesome icons are converted.

Using 3.8.3 on Yosemite

Search doesn't appear to work for FontAwesome

Try searching for 'book' or 'fa-book' - book icon does not appear (video attached)

search.mov.zip

Multi Icon Select

Right now you can click and drag to select multiple icons. However, when you do this it only adds the upper left most icon in the selection.

Maybe allow for multi select to add with "Shift+click" and "command+click" functionality.

...or don't allow for multi select at all.

Material icons crashes Sketch beta

Hi, downloaded the latest font-bundle too and when selecting MaterialIcons, it keeps crashing Sketch.
Font Awesome also crashes Sketch if FontAwesome ttf is not updated (i.e. the ttf needs to be reinstalled)

Sketch 39b5

Icons added to random point on canvas

Hi there,

Thanks for your excellent, useful plug-in. The plug-in doesn't seem to recognise if you have an artboard selected when you insert an icon, and it places the icons on a random location on the canvas. It can make it very tricky to locate the icon, especially when they are quite small!

Apologies if this is the incorrect way of letting you know this - I'm not a developer, just a Sketch 3 user :-)

Regards,
Katy

Request: include ionicons icon font

Hello from Spain, Kerem :-)
first of all, thank you for this awesome plugin, it is making my life with Sketch even easier.

I'd like to resquest the collection http://ionicons.com/ to be supported if feasible. It contains an interesting set of icons with elegant style.

Best regards!

Material design 3rd party icons

It would be great to use the material design icon font found here (https://materialdesignicons.com/), which includes a lot of 3rd party icons.

Plugin works only once per session

I can only use the plugin once per session.
Meaning, if I activate the plugin, either by shortcut key or by menu item, I can select and insert my icon or icons (with grid mode) but once I've inserted icons, I cannot reactivate the plugin unless i first quit sketch.

I'm using latest Sketch on El Capitan

Icon content doesn't change when selecting new icon

Previously-created icons (or any selected text, for that matter) aren't being replaced when I try to change the icon. Neither the selected icon nor the layer name change when I select a new icon from the plugin's dialog window:

I noticed this after the most recent Sketch update (3.8.1), yet it may have been caused by a previous update.

Plugin wont work with Version 3.8 (29681)

Uninstalled and reinstaled but the plug-in menú just have 2 options: install budle or install font and either of those do nothing when i select a TTF file or a son.

"Add Icon with Grid" not firing after first time firing.

Using Sketch Version 3.4 (15575).

Opened Sketch Version 3.4 (15575), am able to add a icon to the artboard, then when I go to do the same action, it doesn't fire a second time.

Adding custom Shortcuts to Icon fonts

Create custom library?

I think I can take a bunch of random icons and create my own ttf/otf file. Would be nice to be able to add them in.

Also - I recently found a HUGE icon set called retinaicon.com - They are pay icons but possible in future to add any .ttf/.otf file? I guess similar to above question.

Awesome work btw. Thanks.

Uncertain about usage process

This is a very nice plugin I used it on one machine and worked very well.
I just installed on my new machine and now the only menu items I see are about installing fonts. Even after installing I can't add icons like before.

I don't see any instructions so assuming it should just work as before but I can't seem to figure out if I did something incorrectly.
Please see below.

If i can search in Chinese language？

Hi Keremciu,

I am in China
If i can search in Chinese language？

Not working / nothing happens

Hey,

I installed the plugin and installed the three fonts but I don't see anything when I click on the plugin from the plugin menu. I tried installing it from Sketch Toolbox and through the manual process, same result. See image below.

Sketch 3.2.2 (9983)
OSX 10.10

Option to add "Converted to outlines" version with bounding box

First off, thanks a ton for this plugin! Use this every day, very frequently.

One thing that would be amazing is the option to have the added icon (from the dialog) be converted to outlines and have a bounding box added as a layer below it automatically.

Not everyone I work with has the fonts installed so when I share documents, it shows up as all question marks. I prefer to work with the vectors as well, but keep a maintained bounding box. What I do today is convert the icon to outlines, add a base at the bottom so I can maintain the container, and then folder it. I included a screenshot.

I would do a pull request if I knew enough about how to write in Cocoascript – maybe soon!

Cheers!

search only work once

Hi,
When I search a keyword in add an icon box, it only works at first time.
If I type another keyword to search, always return empty.
I have to close the box and open again to search.
Can you take a look? Thanks.

Name changes

Can we change the name of a few of the plugin options and menu items so that they describe the UI that is displayed (rather than the code)?

• Change radiolist / list to grid or grid view
• Change combobox to drop-down list or simply list

(Sorry, I don't remember the precise names of the current options; I'm submitting this from my phone and can't look them up easily.)

Like it, but

Isn't it easier to use Icon Jar to drag icons from into a Sketch document.
Works perfect for me, and easy to use.
If there could be a better integration to sketch... let me know :-)

Or did i misunderstand what iconfont is?

Regards, Maik

Icons not showing up

Hello,
I just got the plugin to run with 3.4.1 but there is still one problem. When opening up any of the icon collections it looks always like this:

What am I doing wrong?
Thank you very much.

Remove Dropdown select method?

Seems like the dropdown selection method is fairly useless. Scrolling through one icon at a time is pretty undesirable.

ion and awesome call the dropdown: Add with Dropdown
material calls it: Add with combobox

Maybe this method could be removed all together or at least moved to the bottom of the list. Add with grid should be the first

Same font import duplicating

@eddzio on twitter gave me information about this problem, I will check this duplicate problem :)