Product Icons

We created a grid system for the iconography that represents the various products that the Datadog platform offers. This system contains a few main components—key shapes, flow lines, and a square grid—in order to maintain consistency in shape, density, and clarity. The key shape component gives the designer six shapes to work off of when they begin to draw a new icon. There are cardinal, orthogonal, and hexagonal flow lines that provide a guide for stopping points, break points, or elements to highlight. The square grid assists in decision-making on the overall shape of the icon. In addition to these three main components, there are rules and guidelines that are specific to particular instances such as parallel lines, dots, arrow heads, etc. This project is ongoing, as each new product that requires an icon is used as a stress test on how flexible and effective this grid system is. As the iconography family grows, adjustments may be made to the system to accommodate the needs of each of the product teams.

A box with the same dimensions as the grids above is rendered containing concentric circles and squares.

Key shapes

Icons are placed within the previously detailed grid and arranged in three rows of two to showcase the six key shapes leveraged in the brand's icon creation. From top left: square, small square, circle, small circle, rectangle vertical, and rectangle horizontal.

Key shapes example

Within the established grid system, the centered vertical line, centered horizontal line, line that extends from the top left corner to the bottom right corner, and line that extend from the bottom left corner to the top right corner are highlighted in red.

Cardinal and orthogonal flowline

Icons are placed within the previously detailed grid and arranged in three rows of two to showcase icons that leverage the cardinal and orthogonal flowlines.

Cardinal and orthogonal flowline example

Within the established grid system, three lines dividing the square into six slices are highlighted in red.

Hexagonal flowline

Icons are placed within the previously detailed grid and arranged in three rows of two to showcase icons that leverage the hexagonal flowlines.

Hexagonal flowline example