Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need icon design guidelines #171

Open
designgrill opened this issue Aug 25, 2017 · 10 comments
Open

Need icon design guidelines #171

designgrill opened this issue Aug 25, 2017 · 10 comments

Comments

@designgrill
Copy link

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.

@ShaneNZ
Copy link

ShaneNZ commented Oct 24, 2017

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
Copy link

ShaneNZ commented Oct 25, 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.

@colebemis
Copy link
Member

colebemis commented Jan 17, 2019

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:

image

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

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

This was referenced Feb 17, 2019
@moeenio moeenio mentioned this issue Apr 10, 2019
shawnwwwww added a commit to shawnwwwww/feather that referenced this issue May 23, 2019
followed guideline from feathericons#171
This was referenced Jun 14, 2019
@NaoufelTarchoul
Copy link

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

I just opened some icons in Illustrator. None of them seem to respect this 1px safe zone 🤷🏽‍♂️

@moeenio
Copy link

moeenio commented Sep 7, 2019

@naoufel-ui This rule can be broken case-by-case.

@jletey jletey mentioned this issue Nov 27, 2019
@colebemis colebemis pinned this issue Dec 1, 2019
@moeenio moeenio mentioned this issue Jan 15, 2020
@JanTrichter
Copy link

Is there something like an Illustrator template which has all the required settings and a small example? Would like to add some icons to a website that need to match the feather icon style but I find it hard to set up everything correctly.

@moeenio
Copy link

moeenio commented Jun 18, 2021

Feather is not getting anything new, but you can ask over at @lucide-icons.

@JanTrichter
Copy link

Feather is not getting anything new, but you can ask over at @lucide-icons.

I don't want to add anything "new" to the icon set. I wanted to add some icons which I need for my own project and I need them to fit the feather guidelines because I am already using Feather Icons. But thanks for your answer, always good to know :) Have a good day!

@moeenio
Copy link

moeenio commented Jun 19, 2021

You asked for an Illustrator template, it may exist in lucide at some point, if you ask ;)

@JonathanNathanson
Copy link

Hi,

Does anyone know how to add a new icon to the react-feather package? It would be great to know the method as I need the £GBP symbol in react-feather. It's a great library! Just missing a couple of key icons for my usage.

Thanks,
Jonathan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants