search

phosphor-icons / homepage

The homepage of Phosphor Icons, a flexible icon family for everyone
https://phosphoricons.com
MIT License
3.89k stars 93 forks source link

Icon Grid System #514

Open empessah opened 2 weeks ago

empessah commented 2 weeks ago

Describe the requested icon(s)

Do you have a working file for designing the icons, like a grid system and a stroke weight system? I need to make some custom icons that are kinda specific to the application I am working on and want to keep them in the same style as a phosphor.

rektdeckard commented 2 weeks ago

There's some cursory information about our icon grid at the back of our Figma Library file, but it's not very detailed. Was there something specific you needed?

empessah commented 2 weeks ago

The three big things are the grid system and the line weight for each corresponding weight, such as thin using .5 stroke or whatever it is, and finally, is there some guideline on clear space? For example, a square icon is not just a 16x16 icon. It happens to be smaller than that. I don't need it to be detailed; it's just enough to fake it till I make it and possibly submit it to add to the icon lib or at least help get them started.

rektdeckard commented 2 weeks ago

If you look at the file I linked (on the Read Me page), you can see the keyshapes we use as a basic template. A square icon, or one that incorporates a square, starts with a centered 11x11 square. A circle is a centered 12px diameter circle. &c. Icons based on one of the common keyshapes generally follow this grid, but exceptions are made to balance the apparent optical size if needed.

As for strokes, you can confirm this by inspecting the raw stroke variants of the icons on the Components page, but they are as follows:

Weight Stroke thickness
Regular 1px
Thin 0.5px
Light 0.75px
Bold 1.5px
Fill 1px (where applicable)
Duotone 1px (where applicable)

Strokes are always centered, not inside or outside. As the Read Me mentions, we also default to 0.5px corner radius, but again exceptions are made all the time for clarity or aesthetics.

There are certainly other implicit rules in the system, but they aren't codified anywhere. Hopefully you find the library is simple enough that the good patterns tend to be pretty obvious. If you feel like doing some reading, @minoraxis has written some articles on the subject (though beware, references to Phosphor for Android refer to an older project, and the grids used there don't apply here):