Need icon design guidelines

[designgrill]

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]

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]

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]

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:

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:

Icons should have similar "optical volumes:"

Good	Bad

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

[NaoufelTarchoul]

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]

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

[JanTrichter]

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]

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

[JanTrichter]

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]

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

[JonathanNathanson]

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