Using Icon Style to Change Icon Colors

The shapes and icons library opens with the default style pre-selected for each icon collection. There are no alternate styles for several icon collections, so the :icon_style: (Icon style) button is not visible. However, for Bluescape icons, there are several style options. One of which allows you to customize the icon color.

Ways to incorporate this feature in your workflows :bulb:

  • Legend: Use icons as markers or labels.
    • See an example in the how to instructions below.
  • Status marker: Create social media assets or video thumbnails from the image.
  • Branding: Create presentations for external audiences using consistent company colors.
  • Visual categorization: When organizing information in a workspace, use icons in place of - or in conjunction with - text labels and color-code them for clear and easy-to-understand visuals.

How to customize icon color

  1. Open the Shapes and icons library.

  2. Select an icon collection and look beside the search bar for the :icon_style: (Icon style) button.

  3. If visible, select :icon_style: (Icon style) and choose an icon style with no pre-existing colors, for example, black outline with no fill, or entirely black. The preview of the icons listed in the library will change based on your style selection.

  4. Select which icon(s) or collection(s) to add to your shapes tool panel.
    • Adding icons: Any icon(s) you select are immediately added to the Recently used section of your shapes tool panel, even before you select Save, and appear in the selected style.
    • Adding icon collections: Any collection(s) you mark as checked are saved below the Recently used section of your shapes tool panel once you hit Save. This adds all the icons from that collection - in your selected style - to a collapsed list for tidy, quick access.
  5. Add the customizable icons as needed from the shapes tool panel.
  6. Once placed in the workspace, the icon remains selected, and the toolbar is visible, including the color wheel.
    Icon toolbar including icon color based on selected style
  7. Select :text_color: (Icon color) and choose from the preset Bluescape colors or add custom colors.

    Here, colored icons are used to label a map of the Atlantic, showing past and upcoming developments in multiple countries over 3 years. :arrow_up:

You’re ready to open a workspace and customize your icons! :bluescape_home: