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.

Concerns

MisrepresentationThe 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.