Iconography

Images that convey the form the AI takes in a product

Overview:

While it seems like the sparkling stars icon is 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.

Benefits:

Anti-patterns:

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.

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.

What examples have you seen?

Share links or reach out with your thoughts?

Thanks for reaching out!
There was an error submitting your form. Please check that all required fields are complete.