Well-Documented

Articulate the icon family’s key principles:

Example principles from the Phosphor icon family (a riff on what we covered above): • Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents. • Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented. • Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.

List out the technical rules:

Example technical rules from the Phosphor icon family: • Use a 48 x 48px canvas • Use a 1.5px centered stroke • Use rounded end caps • Use contiguous strokes unless broken segments are helpful for comprehension • Use straight segments, perfect arcs, and 15° angle increments where possible • Adjust curves when necessary to maintain the design principles • Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary • Use the following shape keylines: 28 x 28px circles, 25 x 25px squares, 28 x 22px landscape rectangles, 22 x 28px portrait rectangles • Keep a 6px thick trim area

Iterate on these, and make the documentation public if you like:

Tested

Check for consistency. Make sure the icons work in context, at the relevant sizes. Make sure they work in harmony with the larger visual system.

Placing icons next to each other is helpful in proofing for our principles above—clarity, readability, alignment, brevity, consistency, and personality: