Basics
Grid
When drawing Soul icons, use pixel-based grids of 18px for Medium icon size. It will serve as a basic guideline to fit the icon correctly in place.
Aim to fine-tune the shape you are trying to achieve during creation.
Padding
The grid for every icon includes 1px padding. This way, icons keep their intended scale and surrounding margins when exported.
Never expand the artwork into the padding unless in rare cases where specific details are required to define the icon shape's meaning or relevance.
Shapes
When creating basic shapes across the icon set, use basic lines. This helps facilitate a strong design foundation across the icon set, with consistent sizes and proportions across similar icons.
Style
Stroke
One icon should not look heavier or lighter than other icons of the same size. Nor should there be different weights within one icon. Maintain the same visual weight by using a 1px stroke for all icons.
There are a few exceptions to this rule which happens when the icon is complex or has a specific density of line.
Corners
Use a consistent corner radius of 2px for rounded shapes. The 2px radius can be supplemented by 0.5px or 1px radiuses for details when necessary to make the icon understandable or object shape clearly defined. Use an additional radius of 4px or full circle to make the metaphor reflect the real form of the object.
Angles
Use 45° angles for even anti-aliasing. For other angles, use the IBM Carbon Design System rule of "increments of 15° to depict best the shape you’re creating for your metaphor".
Perspective
Soul icons are all approved and ready to use. If you want to contribute new icons to the library, please stick to either direct (straight-on) or side (profile) views and avoid dimensional images.
Subtraction
Shape combination
Use a space of 2px around a subtracted shape, eg. an icon with a plus or lock; to make the shape clearly defined and readable. Position the subtracted shape to the same spot in each icon to keep consistency.
Opposite meaning
Use a space of 1px between the cross line and metaphor for opposite meaning icons, e.g. hidden or no sentiment, to make the meaning clearly defined and readable.
The angle of the cross line is 45º from the top-right corner.
