AI visual identity and icons
How to show that a reply comes from an assistant.
How Tattva shows that something is AI, what the AI is doing, and which icons to use. The rules are short because we found no standard to copy.
How products show AI
Products use a few common signals to show AI. Each has a benefit and a cost.
Sparkle
For. People know it means AI. Google made it standard in 2023, and there were about 100 versions by 2024.
Against. It cannot say what kind of AI it is. Its meaning depends on where it sits and what the label says. Used alone everywhere, it loses its force.
Gradient and glow
For. Carbon uses light to show AI content. It keeps the glow small and at the edges of a box so text stays readable.
Against. A purple or indigo AI gradient looks generic. Copilot moved from a plain blue hexagon to a rainbow ribbon in 2023. Carbon says not to use it as decoration.
Dedicated hue
For. A color can stand for a brand. Claude uses a warm rust-orange with a starburst. OpenAI kept a blossom mark.
Against. Carbon chose a gradient plus a label instead of one color. Both brand examples come from search snippets.
Avatar
For. Shape of AI calls simple marks low risk. They do not suggest the AI can act on its own.
Against. Branded characters add warmth but can promise too much. Lifelike faces can mislead people.
Orb
For. It shows what the AI is doing with no text, and nothing on the page moves. Apple's iOS 26 Siri is a dark orb that pulses while it listens.
Against. It can feel like a sci-fi cliché. On its own, it does not work for people who cannot see it.
The risk of cliché
The sparkle, the purple gradient and the sci-fi orb each look generic. People know the sparkle means AI. But they cared more about whether the answer is right than which AI wrote it. So the mark says where AI is, and the text says what happened.
Our rules for keeping it quiet
Lime means AI. It is only used as a fill behind charcoal text, never as text on paper.
Amber means a person has to act, and the words say why. It never marks AI.
No decorative gradients. Any glow is faint, stays at the edge and is never the only signal.
- One mark for AI across the product. Add text when the action is specific.
- No purple or rainbow gradients.
- Every state is also written in words. Color, motion and shape are never the only signal.
- Controls are pill-shaped. Borders are thin 1px lines.
Labeling AI content
Carbon's AI label can cover anything from one word to a whole page. It opens a small popup with an overview, details, resources and actions. Our AILabel works the same way. The label explains. It never starts an AI action. Once a person edits the content, the tint goes away and an icon button lets them go back to the AI version.
Feature
Top right of the box, a little in from the edge. One label covers everything inside.
Message
Next to the assistant name above the reply. Carbon does not cover chat messages, so this spot is our own guess.
Here is a draft of the reply.
Field
Right side of the input, centered up and down. Edit the text and the undo button replaces the label.
Table
Carbon puts a label at the top right for a whole table, and at the far right of a column header. You place it yourself.
| Ticket | Category |
|---|---|
| Refund request | Billing |
| Login loop | Access |
Image
A corner of the image, with the explanation opening upward. Carbon does not cover images, so this spot is our own guess.
Sizes
Match the label to the text beside it: 16px for 12px text, 18px for 14px, 22px for 16px. Next to icon buttons with no outline, go one size smaller.
What the AI is doing
The presence disc moves through idle, listening, thinking, speaking and error. We did not build a connecting state. One animation runs and only its settings change, so switching states never restarts it. The disc is not a button. A labeled Stop button sits beside it.
Working, with nothing to show yet. The core dims and a lime arc turns around the disc.
Rules
- Screen readers hear the state text only when the state changes, never on every frame.
- A visible label shows the same text, unless the state is already written nearby.
- With reduced motion, the disc stays still, nothing animates, sound level is ignored and changes happen at once.
- Ask for microphone access only when someone presses a button.
- Smooth out the raw microphone level over several frames. AIPresence does this for the level prop.
<div className="flex items-center gap-3">
<AIPresence state={state} level={micLevel} />
<Button variant="secondary" onClick={stop}>Stop</Button>
</div>Icon rules
- Sizes are 16, 20, 24 and 32. Carbon draws on those sizes. 16 and 20 go with 14px and 16px text.
- Draw on a 24px grid with a 1.5px line and rounded ends and corners. Atlassian's new set also uses 1.5px lines with rounded shapes.
- Outline is the default. Use a filled version to show something is selected, as Material Symbols does with its FILL setting. We have few filled icons so far.
- Name an icon for its meaning when it has one purpose. Name it for how it looks when it serves several. This follows Atlassian's two groups. Names end in Icon, such as RegenerateIcon.
- Use currentColor so the icon matches its text. Do not set a fixed color.
- Icons are hidden from screen readers. The button holding the icon provides the name. An icon on its own that carries meaning needs a label. A purely decorative one gets an empty label.
- An icon on its own needs 3:1 contrast (WCAG 1.4.11).
- Icons you can press need a target of at least 24 by 24 CSS px (WCAG 2.5.8). Carbon asks for 44px, so use 44px on touch screens.
- Use two stars for Suggest, a pencil with a sparkle for Edit, text lines with a sparkle for Summarize and looping arrows for Remix. These are the habits Shape of AI lists. There is no standard.
import { RegenerateIcon } from "../lib/icons";
<IconButton label="Regenerate response"><RegenerateIcon width={20} height={20} /></IconButton>All icons
Every icon in src/lib/icons.tsx, shown at 16 and 24 pixels.
AI actions
Conversation and control
Agent and context
Trust and review
Media and input
Interface
Other
What we could not verify
- We could not get the SF Symbols and Lucide specifications.
- No source gave dark mode advice or timings for presence orbs, so ours are our own guesses.
- No source gave advice for high-contrast system modes. We use currentColor and keep a border on tinted labels. We have not checked this.
- The Copilot, Anthropic, OpenAI and Apple items come from search snippets or an outside blog, so treat them with care.
- Carbon does not cover chat messages or images, so those label spots are our own guesses.
- We have not tested the AI mark or its placements with real users.
Sources
- Google, AI sparkle icon research
- Shape of AI, Iconography
- Shape of AI, Avatar
- Carbon for AI
- Carbon AI label usage
- Carbon icon usage
- Atlassian icon system
- Material Symbols
- 21st.dev voice orbs
- WCAG 1.4.11 Non-text contrast
- WCAG 2.5.8 Target size
- Creative Bloq, Copilot
- Indie Hackers, the AI purple problem
- Geist, Anthropic
- Creative Bloq, OpenAI
- Apple Intelligence UI blog