Using Icon Style to Change Icon Colors

Using Bluescape
1

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.
     
    Colored icons for visual categories
    Colored icons for visual categories1920×1076 68.5 KB

How to customize icon color

  1. Open the Shapes and icons library.
     
    Shapes and icons library showing location pins in default color with black outline style
    Shapes and icons library showing location pins in default color with black outline style1420×1437 185 KB

     
  2. Select an icon collection and look beside the search bar for the :icon_style: (Icon style) button.
     
    Icon style setting with the shapes and icons library
    Icon style setting with the shapes and icons library1011×578 33.2 KB

     
  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.
     
    Shapes and icons library showing location pins in solid black style
    Shapes and icons library showing location pins in solid black style1415×1439 145 KB

     
  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.
     
    Custom color map pin icons
    Custom color map pin icons1920×1054 122 KB

     
    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: