Pictograms

Small, simple graphical assets that enhance key web components, communicating ideas quickly and effectively.

Hero Image

Literal, functional, and geometric — our pictograms distill ideas to their purest form, conveying clear purpose and timeless simplicity.



Type

Spaceship pictograms come in two types: regular and comp. The comp type combines a regular pictogram with an icon from Spaceship’s Iconography Library, allowing us to convey more complex and particular concepts.










Versions

All Spaceship pictograms are available in two versions: filled (primary) and outlined (secondary). The outlined version should only be used when a pictogram needs less visual weight than nearby pictograms, text, or UI components. This helps establish visual hierarchy in complex layouts.










Construction

Pictograms are based on a set of rules, from base grid to gradient and stroke parameters, to ensure consistent and balanced results.










Size

Spaceship pictograms are designed to be scalable, maintaining visual consistency and ensuring the best legibility. There are five pictogram sizes in our design system.










Colors

Pictograms generally use a single hue. The only exception is the comp type, which may include brand or notification colors, for which you’ll find more information below. To ensure consistency in UI contexts, pictograms follow the Spaceship Design System color references.









Default color

Gray is the default color for pictograms and should be used to represent messages, actions, or features. In exceptional cases, it may also be used for products. Outlined pictograms are only available in the default color.






Brand colors

SPS Blue, SPS Dark Gray, or white, may also be used in place of the default color when more visual impact is needed or to reinforce the Spaceship identity. Check out the color page for further details.






Product colors

The main product color should be used for pictograms in product-dedicated contexts (product pages, product cards, etc) for all current and upcoming products.






Notification colors

These colors should be used to reinforce a notification message. The comp version should only be used in generic system messages and not in warning states.







Guidance

Here are some examples of what to avoid when creating and using pictograms.



Do not allow key elements of the regular pictogram to fall on the lower right corner.

Do not use complex or multicolored gradients in filled versions.


Do not mix filled and outlined elements in the comp type.

Do not use other colors in the filled versions besides the ones identified above.

Do not use any color on outlined versions besides the default color.

Do not combine the default color with any color besides the Spaceship brand primary and Notification colors.