While it seems like the sparkling stars icon is being used everywhere as a visual indicator of AI's presence, the iconographic language of AI actually appears to be solidifying around three general metaphors:

  • ✨ Sparkly stars are the most ubiquitous. These tend to represent AI as a feature (such as on marketing pages or in buttons), and also distinguish information that has been generated by or with AI. This icon started appearing around 2020 as video enhancement features became more common, possibly owing to its suggested meaning of magic or enhancement
    [A lesser pattern of a magic wand 🪄 shows up occasionally, but it's not clear if this is an alternative metaphor to the sparkly stars or carries its own meaning]
  • 🔮 A glowing orb appears to represent text or chat interfaces specifically. The most direct inspiration tends to come via the OpenAI logo, but some of the examples with a rainbow gradient border are closer in form to the Siri orb (another chat interface reference)
  • 🤖 Robots tend to be used literally to represent bots or agents. The popularity of the GitHub CoPilot bot is likely driving this, with newcomers like the design tool Musho.ai following in its footsteps

As the use cases for this technology evolve, we will likely see the iconography evolve as well. However, like the hamburger menu or the save disk icons, while there may be some debate at the edges we are probably going to live with these icons for a while since users have gotten used to them.

Overall this isn't a bad thing. Consistent iconography leads to predictability and trust by users and consumers.

Where we may see issues pop up relates to the unknown ways that the technology will evolve, and whether these metaphors hold. Will we start to see signifiers or watermarks on products built on OpenAI's models or Gemini's models? How will that change the icons associated with them, or those that aren't?

Users may be able to distinguish CoPilot's look, similar to how Octocat took on a life of its own, but will they be able to distinguish between multiple 24x24 px robot icons, or will we see a convergence?

For now, sticking with the sparkles may be the safest bet.

Details and variations

There is no set convention here! 

  • Follow one of the standards like the sparkly icon, or create your own like Github Copilot.
  • Be mindful not to use your iconography for things unrelated to AI so as not to confuse the user (a potential risk from the more generic forms)
  • Combine your icon with a distinct color palette, name, and persona to help your AI stand out and be discovered

Considerations

Positives

Pattern convergence
Visual language tends to converge faster than UI or Interactive patterns, so it is no wonder we are seeing the sparkles emoji pop up in everything from small plugins to Google's flagship model Gemini. Using familiar iconography is a safe way to help users pinpoint the features in your product that use AI and the content generated from its models.

Emerging language
If we continue to see these three iconic patterns used in a literal way, it may help users distinguish between different types of AI products and interactions. Try and identify which you’re building, and look for other common patterns to make it feel safe and comfortable.

Potential risks

Misrepresentation
The sparkles and robot emojis are used frequently in other use cases as well. Make sure you aren’t using these icons in a way that could lead someone to think some feature does something it does not. Use them consistently across your ecosystem.

Use when:
The AI needs some representative visual to distinguish from human avatars or other icons.

Examples

GitHub's CoPilot
Musho.ai's copilot
Julius forgoes a bot buddy, but maintains the robot metaphor in its iconography
Jasper's logo signals the bot relationship
Character.ai features a character in its main branding
Instead of pulling the buddy into the product, Character.ai uses an animated global orb for its default assistant to help you navigate the product
The woven circle was popularized by OpenAI. This pattern motif seems to represent models whereas the orb represents agents?
Spotify's DJ agent uses a glowing orb as its signifier
The Siri logo appears to be an inspiration for some AI bots
The use of the woven circle motif in Google's Deep Mind logo is similar in form to OpenAI's
Google's flagship model Gemini opts for sparkles as its flair
Sparkles are everywhere (Canva sparkles as an identifier to its Magic Studio)
Framer - sparkles in buttons
Github - sparkles in actions
Figma - sparkles as flair
Slack - spark as a shortcut
Adobe - sparkles
Copy.ai shows the relationship between sparkles (something magical is happening) and the sparkly pencil or wand, which seems to mean "do something"
Grammarly - sparkly pencil
Writer - sparkling wand
Magic wands to signal getting started
Notion shows the difference between sparkles as action and sparkling pencil as magic writing
No items found.