Skip to main content

Icon guidelines

Last updated:
12/15/2023

Guides for creating consistent decorative and system icons.

Intake process

Currently, the Anatomy team has a lead time of 2 weeks. Please reach out for approval, feedback, or help sooner rather than later. If you aren’t able to create an icon on your own, please email anatomy.team@bsci.com.

Not all icon proposals will be approved. If a proposal is not approved, the team will suggest a substitution from the existing library or modifications to the proposed design.

Steps for creating a new icon:

  1. Assess why you want an icon. Is an icon necessary? What value would the icon add?
  2. If the icon is necessary, please look through the existing libraries. If there is a similar icon already in use, please use that icon instead of creating a new one.
  3. If there isn’t an icon that fits your needs, please see the guidelines for the kind of icon you’re creating.
  4. Submit your icon for approval through the Anatomy team and the Brand team.
  5. Once the icon is approved, submit your icon for inclusion into the Anatomy icon library along with the icon’s purpose. All approved icons must be added to the library.

Creating a decorative icon

Note: We will no longer be accepting icon proposals recreating Boston Scientific products.

Setup

  1. Open the template file linked below
    1. Decorative icon template
  2. Make sure that
    1. Snap to Grid is on
    2. Snap to Pixel is on
    3. Grid is showing

Design

  1. Design your icon on the 64 x 64 px artboards provided in the template file
  2. Create the icon shapes on the “Shapes” layer and start with the accent icon treatment
  3. Use a 2px line weight
    1. Avoid using the pen or line tool — create the icon with shapes instead
    2. The pen or line tool will align objects on decimal pixels
  4. Set corners to 2px border radius, all ends should be rounded
  5. Rely on simple geometric shapes to create the icon
    1. Avoid outlining text in icons
  6. Only use the provided global swatches for coloring the icon
  7. Create the four styles of this icon
    1. Default: solid color icon styles for light and dark backgrounds
    2. Accent: adds an accent gradient color to highlight the most important part of the icon for light and dark backgrounds

Final icon

  1. When done designing, make sure your shapes align to the grid, and then duplicate them into the “Final” layer
  2. Expand and combine the shapes into a compound path
  3. Hide the “Shapes” layer and export the SVG following the guidelines below
  4. Submit the final icon for approval

Creating a system icon

Setup

  1. Open the template file linked below
    1. System icon template
  2. Make sure that
    1. Snap to Grid is on
    2. Snap to Pixel is on
    3. Grid is showing

Design

  1. Design your icon on the 18 x 18 px artboard provided in the template file
  2. Create the icon shapes on the “Shapes” layer
  3. Use a 2px line weight
    1. Avoid using the pen or line tool — create the icon with shapes instead
    2. The pen or line tool will align objects on decimal pixels
  4. Set corners to 0-1px border radius, depending on scale of detail
  5. Rely on simple geometric shapes to create the icon
    1. Avoid outlining text in icons
  6. Only use the provided global swatch for coloring the icon

Final icon

  1. When done designing, make sure your shapes align to the grid, and then duplicate them into the “Final” layer
  2. Expand and combine the shapes into a compound path
  3. Hide the “Shapes” layer and export the SVG following the guidelines below
  4. Submit the final icon for approval

Exporting SVGs

Steps to export SVGs from Adobe Illustrator:

  1. Make sure your artboard size is correct
  2. Make sure the icon shapes are expanded and united and is aligned to the grid
  3. Make sure the icon is aligned to the grid
  4. Make sure that the icon colors are using the global color swatches from the template
    1. If creating a decorative icon, create all four styles of icons
    2. If creating a system icon, set the icon to Neutral-00, #000
  5. Go to “File > Export > Export As...”
  6. Select “SVG” from the “Format” dropdown
  7. Check the checkbox “Use Artboards”
  8. Enter the artboard number or range of the icon(s) you want to export
  9. Click “Export”
  10. Make sure the SVG options match these:
    1. Styling = Presentation Attributes
    2. Font = SVG
    3. Images = Preserve
    4. Object IDs = Unique
    5. Decimal = 2
    6. Minify and Responsive checkboxes are checked

export-settings