Iconography
Our brand icon system complements the visual styling of the brand logo and parent marks. Icons should feel current, inviting, and like a natural extension of the overall brand.
The icon design is a mix of in-line and soild fills reflecting how the PTC monochromatic logo conveys the merging of the physical and digital worlds.
Whenever possible icons should use sharp edges and corners similar to the hexagon shape style. Rounded corners are necessary for somethings such as clouds and people, but please use sparingly.
It’s optional to include icon accents and tech filigree to add nuance to what the icon is conveying. These icon accents should be small and filled.
At sizes of 32x32 pixels or smaller, as in the case of most product UI. there is not enough detail to convey the complexity of the outline and solid mix, so in those cases revert to a simple filled form.
Shown are the complex form for anything larger than 32x32 pixels in dimension as well as the solid form which would be either 32x32 or 16x16.
Design guidance for the solid 16x16 form:
2 pixel width strokes
4 pixel width thick strokes
1 pixel width white space separation
The 32x32 pixel version would be a simple doubling of the 16x16 icon.
Design guidance for outline and solid mixed icons 64x64 and larger:
3 pixel width outline strokes
6 pixel width thick strokes
3 pixel width white space separation
2 pixel for fine details (portraying text on paper)
For these larger icons, it should be a mix of solid and inline. In cases where the icon is cannot accommodate such complexity because it so simple that it has to be either a solid shape or outline, do the solid version so it is more similar to the 16x16 icon. The exception would be if the icon image is more naturally understood as something light and open instead of a dark mass (a cloud).
Design guidance for compound icons:
Compound icons are the grouping of two individual icons. When combined the maximum total size should be either 82x64 or 64x82. Please do not resize individual icons when creating compound icons as it will alter the line weights making them either thinner or thicker than what is prescribed in the design system. The space around each icon should also still follow the 3 pixel width of white space separation.
