An icon is a figurative, visual representation of an object, action or idea that is intended to be understood at a glance. Our icons create a symbolic shorthand to connect and engage audiences, and provide flexibility by enhancing communications with a recognizable graphic language unique to the DXC brand.
- Be functional and/or navigational
- Send a clear message or isolate a concept or key word
- Improve a user experience
- Provide harmony and balance to the overall design
- Help break messaging out of the “too-much-text” rut
- Inspire users to click (call to action)
Icons can be used as part of diagrams, infographics and charts, or may stand alone to support written ideas. Treat icons simply when using them as artwork.
Each icon is built on a 12-unit x 12-unit grid. Each icon is exactly 12 units wide or tall. Design must stretch horizontally or vertically touching one side on a 12-unit x 12-unit graph. Exception is circular icons can only take up to 10-unit x 10-unit grid and do not need to touch end.
The minimum height or width for any element in the icon is one grid block unit. In the icon example shown here, each of the triangles, three sides of the frame and the shackle of the padlock all measure one unit thick.
Clear space & minimum size
When positioning icons, maintain a clear space on all sides that is at least equal to half the largest dimension of the icon (represented here by “X”). Whenever possible, even more clear space is preferred.
Icons are best used in small sizes to support the narrative. Never use them as the focal point or hero image. When used in a group, size icons consistently.
To make sure the icons are always clear and legible, follow the minimum sizes for print and digital applications shown here. The minimum sizes indicated refer to the width or height of the actual artwork and do not include the clear space.
Clear space for icons
Print: 0.375" (9.5mm) wide
Desktop: 36px wide
Mobile: 48px wide
Minimum size is based on the larger dimension (width or height).
Icons in action
Charts and graphs
Things to avoid
DON’T distort, flip or alter the icons in any way.
DON’T use color in icons.
DON’T create a lockup with an icon.
DON’T use icons in a way that adds clutter and doesn’t help tell the story.
DON'T use color (gray or any other) for any part of an icon.
DON’T use an icon as a supergraphic.
DON’T add special effects such as a drop shadow to icons.
DON'T outline the icons.
DON'T use color behind an icon.
DON’T use icons at an angle.