Feather: Suggestions etc

[wappsdotgr]

1. As the icon count increases it would be a good idea to add categories (file,devices,social,bla bla...) and/or search at the showcase page (https://feather.netlify.com/)
2. You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)
3. For whoever prefers using iconfont will you be updating the icon set at https://icomoon.io/app/ ?

Anyways, awesome work m8, keep it up!

[colebemis]

As the icon count increases it would be a good idea to add categories (file,devices,social,bla bla...) and/or search at the showcase page (https://feather.netlify.com/)

Absolutely. Adding search to the project page is next on my agenda. I'd love to split the set into categories but I'm struggling to come up with good category names. Do you have any ideas?

You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)

Great idea. After I launch v2.0.0, I'm planning to write up some Design Guidelines including some simple rules, a boilerplate template, and instructions for contributing. I'd love to start taking contributions from the community!

For whoever prefers using iconfont will you be updating the icon set at https://icomoon.io/app/ ?

I'm not sure who can update the icomoon set but it looks like it's been updated recently. The Feather set on icomoon now contains 163 icons (up from 130). https://icomoon.io/app/#/select/library

Thanks for the great suggestions!

[wappsdotgr]

About:

1. A good /kinda effortless way is to follow the categories of another major icon set (https://material.io/icons/ maybe?)
2. Idk how they work either, I thought the set creator updated his/her creation. Would you consider someone helping you (turning svgs into an iconfont) so there is an iconfont in this package (using the svg filenames which as far as I see are unique) ?

PS: Idk if here is the place to post it but I attached a "user-delete" icon which is your "user-plus" one with the "+" rotated. You probably have the "user-minus" covering that usage but seems kinda odd. The extension is txt and not svg due to github attaching limitation.
user-delete.txt

[colebemis]

Thanks for the icon! Maybe I'll add user-check and user-x icons to keep things consistent.

I'll have to think about the icon font. I tend to discourage the use of icon fonts in general because I think SVGs are a much better alternative. Also, tools like Icomoon make it super easy to generate your own icon font from a set of SVGs. I would argue that using Icomoon is actually better because you can create a set with only the icons you need.

[colebemis]

Here are some good articles comparing SVG to icon fonts:

• Inline SVG vs Icon Fonts [CAGEMATCH]
• Seriously, Don’t Use Icon Fonts
• Ten reasons we switched from icon font to SVG

[wappsdotgr]

I ve read those articles from your changelog, personally I think both svgs and iconfonts have optimal use-cases. Due to icomoon's restriction of stroke shaped svgs I guess I could fork your repo, expand shapes and have only the converted icons for icomoon usage (if you are ok with this ofc).

Also, I ll research and try to setup some categories to send you. I hope you find them usefull (may take some days, im a little busy right now)

Thx for your replies m8, looking forward for Feather 2.0 and for boilerplates to start contributing icons :)

[colebemis]

Feel free to customize Feather however you'd like!

I didn't know Icomoon had that restriction. The built-in Feather icon library seems to work fine though. Someone must have converted strokes to outlines.

[wappsdotgr]

Hey, i didnt have time to research more, hope the following are enough to get you started for whatever you end up with :)

---

Some categories not analyzed:

• Application / Action / Users
• Accessibility + Gestures
• Devices (Communication / Hardware / etc)
• Image (Contrast / Brightness / Crop / etc)
• Maps + Places + Transportation

Some analyzed:

• Navigation (menu, arrows, etc)
• Form Elements (checkboxes, radio, ...)
• Media Controls (Audio / Video / etc)
• File
  
  
  
  • Types (text, zip, image, video, ...)
  
  
  • Cloud (upload, download, ...)
  
  
  • Misc (dir-closed, dir-open, ...)
  
  
• Brand
  
  
  
  • Browsers (chrome, firefox, safari, ...)
  
  
  • Social (fb, twitter, pinterest, ...)
  
  
  • Misc (lastfm, github, steam, ...)
  
  
• Payment
  
  
  
  • Currencies (usd, euro, gbp, ...)
  
  
  • Ways (paypal, master, bitcoin, ...)
  
  
• Charts (pie, bars, line, ...)
• WYSIWYG
  
  
  
  • Texts (H1-H6, paragraph, quote, pre, ...)
  
  
  • Align (left, center, right, justify)
  
  
  • Style (bold, italics, underline, strike-through, indent, outdent)
  
  
  • Lists (ul, ol)
  
  
  • Misc (link, image, ...)
  
  
  • From other categories (undo, redo, copy, cut, paste, ...)
  
  
• Platform (android, ios, windows, blackberry, ...)
• Games
  
  
  
  • Chess: 6 icons (king, queen, rook, bishop, knight, pawn)
  
  
  • Backgammon: 6 icons (dice 1-6)
  
  
  • Cards: 4 icons (spades, hearts, clubs, diamonds)
  
  
• Weather (rainy, stormy, sunny, cloudy, hot, cold, dry, wet, ...)

Some resources:

• https://material.io/icons/
• http://fontawesome.io/icons/
• http://zurb.com/playground/foundation-icon-fonts-3

Ridiculously categorized icons collection:

• https://icons8.com/icon/

[colebemis]

Thanks so much for doing that research! That's more than enough to get me started 👍

[NetOperatorWibby]

I found a reference to his iconset in a project I stopped working on ages ago (https://hikar.io). I'm working on it again and am pleased to see that you're still working on Feather!

Highjacked this thread to say thanks.

[colebemis]

@NetOperatorWibby Thank you for the kind words! 😃

[Swizz]

There is a way to use svg icon with the same ease than iconfont ?

[Swizz]

Possible experiment

.fth.fth-box::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  content: url(icons/core/box.svg); 
}

jsbin

[colebemis]

@Swizz That's an interesting idea. One issue with this approach is that when content is used to display an SVG, we are no longer able to control attributes of that SVG. For example, we'd have no control over the stroke color or stroke-width of the icons.

[Swizz]

And what about inheritance ?

svg <svg [...] width="inherit" height="inherit" fill="inherit" stroke="inherit" stroke-width="inherit"> <path [...] fill="inherit" stroke="inherit" stroke-width="inherit"/> <polyline [...] fill="inherit" stroke="inherit" stroke-width="inherit"/> <line [...] fill="inherit" stroke="inherit" stroke-width="inherit"/> <line [...] fill="inherit" stroke="inherit" stroke-width="inherit"/> </svg>

.fth.fth-package {
  width: 200px;
  height: 200px;
  fill: none;
  stroke: #0f0f0f;
  stroke-width: 2;
  display: inline-block;
}

jsbin

Work well with svg in place not with content...

---

The next idea, could be the use of svg <symbol> and svg <use>

[thewinger]

Any update on the boilerplate/template?

>

1. You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)

[digitalcraftsman]

Are there any plans to provide the feather icon set in the ttf or otf format, similar to FontAwesome?
I would like to use this superb icon set to customize my desktop environemt.

[Swizz]

@Colebemis provided some stuff about that : https://github.com/colebemis/feather/issues/8#issuecomment-302803298