Iconography

Iconography integrates seamlessly across different components in an interface to inform users about new or enhanced generative AI features, signal generative AI output, or to represent a specific entity.

On this page

About this page

Published: July 11, 2024 | Last updated: December 18, 2025

General convention for generative AI

Iconography is key in defining a symbolic convention around generative AI in any given experience. Aligning with industry conventions will speed up recognition and contribute to improving task efficiency for users. As of today, the sparkle stands as the consolidated symbol associated with generative AI-powered features. We offer two ways to leverage sparkles as the affordance for generative AI; standalone and integrated.

Standalone sparkle

The standalone sparkle icon can be used to highlight AI as the primary or sole function of the feature. For example, "Ask AI" button or AI chat ingress. This icon is best used when space allows for a clear, recognizable affordance without competing elements. To optimize legibility, the icon may be filled when used in very small sizes (below 16x16px).

Integrated sparkle

Sparkle can be integrated with other icons to indicate that AI enhances an existing, familiar function. For example, AI-enhanced search. These icons are best used when the base function and AI enhancement are key for users understanding. We currently offer a select set of icons combined with sparkles based on common AI enhanced scenarios; search-gen-ai icon used for AI powered search, edit-gen-ai used for AI assisted editing capabilities, and suggestions-gen-ai used for recommendations generated by AI.

Key Principles

User expectations

Standalone sparkle increases AI discoverability complimenting mental models where users are seeking AI. Integrated sparkles preserve familiarity of common icons, suggesting enhancement of the said feature with generative AI.

Feature hierarchy

For a primary generative AI feature, use standalone sparkle. For an AI enhanced feature, integrate sparkles.

Common use cases

Actions

This icon can be used next to text in a button to indicate generative AI action triggers or ingress.

Integrated sparkles can be used in buttons to to suggest generative Ai enhanced actions. For example, Search enhanced by generative AI, or generative AI assisted editing.

Output from generative AI

Standalone sparkle icon can also be used to indicate the output produced by generative AI, like badges or labels positioned next to AI-generated content.

Generated by AI

Integrated sparkles can be used to show recommendations from generative AI.

Unique identifier for generative AI entities 

A generative AI entity or model needs a unique identity that users can recognize when interacting with it conversationally. In scenarios where multiple generative AI services or models actively engage with a user, providing a unique visual affordance to each generative AI entity will helps users identify with which type of generative AI they are interacting with. 

These unique identifiers consist of logos or avatars styled according to the visual foundation. The sparkle symbol is reserved to communicate generative AI-powered action triggers only, and should not be used as a unique identifier for a generative AI entity. 

General guidelines

Do

  • Use iconography consistently to help reduce cognitive load.
  • Leverage the sparkle icon to communicate generative AI actions across your application or product.

Don't

  • Avoid introducing unnecessary icons that reduce the impact and recognition of the sparkle.
  • Don’t introduce icons that might compete with each other.

Icon

Display basic icons that match with Cloudscape's sizes, colors, and typography.

Visual affordance

Styling and visual properties that can help users identify generative AI powered features across any experience.