Contents x
    Icons
    • 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Icons

    • Updated on 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    The Icons category of your DSM documentation site can contain any symbols that you reference on a regular basis, such as system icons, logos, and illustrations. Viewers of your DSM site will be able to download these items as SVGs, so consider adding assets as icons that you might frequently download—logos, illustrations, etc.

    There are three guidelines to follow when building icons.

    Guidelines

    ⚖️ Use consistent sizing

    Icons should be built at set sizes (e.g., 24x24px, 48x48px) to be available in the override panel for one-off use cases. If icons are built at slightly different sizes, they won’t appear in the Sketch override panel for use.

    🎨 Use layer styles for icon fills

    As with all colors in the Sketch file, icons should use saved layer styles to account for their fills and borders, not Sketch solely using color variables or using color swatches via symbols.

    📁 Mark icons exportable in Sketch

    Before adding icons to your documentation site, you'll need to take the following steps in Sketch:

    1. In your Sketch file, select the Symbol Sources you want to add as icons. It's important you select the Symbol Sources, not Symbol Instances.
    2. Mark the Symbol as Exportable and set the export type to SVG.
    3. After you save the file, re-upload the Sketch file to your design system.
    Was this article helpful?
    What's Next