Skip to content
Tattva

AIMark

Stable

A small four-point shape that tells people something was made by AI.

Also known as ai icon, sparkle, ai logo

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Sizes

Five sizes. The first three match small, medium and large text. The last two are for use on their own.

UsageCodeDesignAccessibility

When to use it

The one shape this system uses to mean AI. It takes the color of the text beside it, and its arms are slightly uneven, so it reads as our own mark rather than a generic sparkle.

Made of: Four-point shape

Use it for

  • Beside the words on a button that starts an AI action, like Summarize.
  • On its own, with a title, inside a small badge or circle.
  • Inside other AI labels that need a symbol.

Not for

  • Labelling a piece of content as made by AI: use AIBadge.
  • Explaining how AI content was made: use AILabel.
  • Showing who wrote a message: use Avatar.

Do and avoid

Do. One mark beside clear words shows which action uses AI.
Avoid. The same lone mark on every button says nothing about each one.

Do

  • Add words when the action is specific, like Summarize or Rewrite.
  • Use one mark for AI everywhere so people learn it.
  • Match its size to the text beside it.
  • Give it a title when it stands alone.

Avoid

  • Put it alone on every button. Too many marks lose their meaning.
  • Use a second AI symbol in the same product.
  • Make it lime on a plain page background. Lime is a fill that holds dark text.
  • Use it as decoration where nothing is made by AI.

On a phone

  • The mark is a fixed pixel size and looks the same on a phone.
  • It is not tappable. Put it inside a button if it starts something, and that button gets a 44px target on touch screens.

Seen in products

  • Google introduced the sparkle in the mid-2010s, made it standard in 2023, and had about 100 versions by 2024.
  • Google found people read the sparkle as AI. But it cannot tell different kinds of AI apart. Its meaning depends on where it sits and what words come with it.
  • In the same research, a microphone with a sparkle was understood as AI better than a microphone alone.
  • Shape of AI advises adding words while the meaning is still new, using one symbol per product, and not putting lone sparkles everywhere.
  • Anthropic uses a warm orange starburst. OpenAI kept a blossom mark and made the O in its name slightly imperfect on purpose (both from search snippets).

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started