Feather: Need icon design guidelines

Created on 25 Aug 2017 · 5Comments · Source: feathericons/feather

I see it as part of the roadmap and high up in there. Creating this ticket so that one can know once the guidelines are live.

Please close this ticket once the guidelines are published.

enhancement

Source

designgrill

👍13

Most helpful comment

Okay, here's my first stab at some guidelines. I'll continue to update this comment as I have time, then move it into a markdown file when I feel like it's mostly complete.

Constraints

These are strict constraints of the system and cannot be broken.

Every icon fits in a 24x24 canvas.
Every line and shape has a 2px center-aligned stroke with round joins and round caps.
No fills.

Guidelines

These are general guidelines that help create consistency but can be broken on a case-by-case basis.

90° corners should have a 2px radius:

2019-01-17 at 14 22

Icons should have a 1px empty “safe zone” on the edges of the canvas:

Distinct elements of an icon should be seperated by at least 2px of empty space:

2019-01-17 at 14 20

Icons should have similar "optical volumes:"

| Good | Bad |
| --- | --- |
| 2019-01-17 at 14 24 | 2019-01-17 at 14 25 |

See the "Grid and Optical Volume" section of Nucleo's Icon Guidelines.

Project Setup

# Clone the repo
git clone https://github.com/feathericons/feather.git
cd feather

# Install dependencies
npm install

# Run `all` script to make sure everything is set up properly
npm run all

# If the `all` script completes successfully, you're good to go!

Adding an Icon

Export the icon as an SVG from Figma/Illustrator/etc.
Create a new local branch
Place the SVG in the icons directory
Run npm run build
Commit the SVG file
Open a pull request

colebemis on 17 Jan 2019

👍20 ❤10 🚀4 🎉4 👀3 😄2

All 5 comments

Working to get a setup for SVGO that post-processes SVG output into a nice clean form, ready for inclusion - I think this should be a part of the guidelines. Do you have any recommendations on configuration/setup? Please tell me I don't have to hand modify each SVG icon output :)

ShaneNZ on 25 Oct 2017

OK, realised that it's part of the build process, but still would be good to be submitting decent, clean SVG files in the first place. Any specific requirements, needs? Got it down and clean now, although I do have an extra container around all my shapes that I can't seem to get rid of.