AI Iconography

The Sparkle

The sparkle icon is the most basic form of AI visual representation within our product. Therefore, it has minimal use.

• As a standalone — For Copilot-related actions
• In AI buttons — For initiating AI-powered actions
• Combined with other icons — For emphasizing AI-powered capabilities

---

Standalone Sparkle

We use the sparkle icon to represent Copilot. When provided within an icon-only button, the sparkle should always indicate Copilot-related features.

---

AI Buttons

See the AI Button section.

---

Combining the Sparkle

AI features that utilize icons can be combined with the sparkle to create an AI version of the icon. Leverage existing icons and add sparkle to them, so we aren't expanding our visual language; instead, we're adding slight variations to it.

Pre-Existing Combined Icons

Our Design System already offers a range of pre-combined AI icons that serve specific purposes.

AI Indicator

We only use the AI Indicator icon on the AI Indicator component and the AI in-line alert.

AI Anomalies

We use the AI anomalies icon to denote analytics anomalies detected by AI.

 

AI Functions

We use the AI functions icon to denote specific features and tools, such as Guides.

Creating a custom combined AI icon

When combining the sparkle with an existing icon, we should be mindful of the available white space within the icon to determine where to place the sparkle. We usually recommend any of the corners.

It is also always important to consider that the space taken by the sparkle doesn’t obfuscate the base significance of the existing icon. For example, if we have the comment bubble icon.

And we place the sparkle at the bottom left corner of the icon, completely removing the little tail of the bubble, making it really difficult to identify it as such.

You can also remove the smaller sparks in the sparkle and rearrange their order so they can fit on icons that are already busy.