Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsColorAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Iconography

Visual representations of AIUse new AI-related user interface iconsGuidelines for the AI SparkleIcons in useInformation iconsAction iconsUI icon do's and don'tsIcon don'tsVisual representations of AIUse new AI-related user interface iconsGuidelines for the AI SparkleIcons in useInformation iconsAction iconsUI icon do's and don'tsIcon don'ts

Visual representations of AI

AI is a hot topic, and there are a variety of ways that we represent it in different parts of the Red Hat brand. Nearly every medium we use includes one or more ways to represent AI and related concepts.

  • Make sure you're using the appropriate visual for your use case and application.
  • Consider the size of the space, the user's action, and their point in the customer journey.
  • Representations include: UI icons, Standard icons, Technology icons, 3D objects, 3D textures, and Collages.
  • Red Hat UI icons: edit and AI experience
    UI icons
  • Red Hat standard icons: AI experience and AI model
    Standard icons
  • Red Hat technology icons: AI and Lightspeed
    Technology icons
  • Red Hat 3D objects: 3D AI and 3D AI Cube
    3D objects
  • Red Hat 3D textures, showing AI model and datapoints
    3D textures
  • Red Hat collages, showing agentic AI and edge computing
    Collages

Red Hat has created a new set of UI icons to indicate when a feature or interaction will use AI.

  • The icons are built on the recognition of existing UI icons and metaphors.
  • Sparkles appear across Red Hat visuals to represent AI experiences.
  • An initial set of 9 icons covers the majority of AI-related features and experiences.
  • Example: Edit + AI = Edit with AI.
Example: Edit + AI = Edit with AI

Guidelines for the AI Sparkle

  • When the sparkle is added to another icon, it sits in the same spot in the upper left corner of each icon for consistency (this position works best because many icons sit on a 45-degree angle).
  • When necessary, the sparkle breaks into the outline of the icon with a minimum of 2px clear space around it for maximum legibility.
  • Sparkles are square with slightly round ends, matching the proportions and details of other sparkles across the Red Hat design language.
  • Don't create new AI icons.
  • Examples of different forms of the AI experience icons: 3D, technology icon, standard, and UI.
    Sparkles are square with slightly round ends, matching the proportions of other sparkles across the Red Hat design language.
  • Examples of the AI sparkle sitting in the same upper left corner of each icon: create, edit, enhance, and filter.
    The added sparkle sits in the same upper left corner of each icon for consistency.
  • Zoomed in example of how the AI sparkle breaks into the outline of the icon with a minimum of 2px clear space.
    When necessary, the sparkle breaks into the outline of the icon with a minimum of 2px clear space for legibility.

Icons in use

Use an icon with an AI sparkle to indicate an AI-enabled action or AI-generated result. Icons with AI sparkles should always be paired with text (in the button or on hover) that says "...with AI", "...by AI", or something similar so that there are multiple indicators that AI is being used.

User research indicates that users need the additional clarity provided by both text and an icon.

Examples of the AI sparkle within different UI icons throughout the user interface, like an edit button, filters with AI dropdown, and a search with AI input.
Icons can be used in non-interactive components, like tags or labels, and on buttons.

Information icons

  • Where to use them: On a pop-up, alert, card, or other informative element.
  • What they indicate: These icons indicate to the user that the information currently being provided to them was generated with AI.
    • AI info UI icon rh-ui-icon-ai-info: When this icon is present, the information presented was partially or completely generated by AI.
    • AI error UI icon rh-ui-icon-ai-error: When this icon is present, a problem has been identified by/with help from AI.
    • AI experience UI icon rh-ui-icon-ai-experience: Use this one when neither of the other icons fit.
  • Example: A card showing an AI-generated summary of dashboard data.
  • Don't create new AI icons.

Download them in Brand Portal

Action icons

  • Where to use them: As a button or on a button.
  • What they indicate: These icons indicate to the user that when they click on them, the next action will use or be enabled by AI.
    • AI edit UI icon rh-ui-icon-ai-edit: When clicked, the user will begin to edit something with help from AI.
    • AI troubleshoot UI icon rh-ui-icon-ai-troubleshoot: When clicked, the user will receive help or suggestions from AI to troubleshoot.
    • AI filter UI icon rh-ui-icon-ai-filter: When clicked, the user will filter data with help or suggestions from AI.
    • AI search UI icon rh-ui-icon-ai-search: When clicked, the user will begin to search with help from AI.
    • AI create UI icon rh-ui-icon-ai-create: When clicked, the user will create something new with help from AI.
    • AI enhance UI icon rh-ui-icon-ai-enhance: When clicked, the user will begin enhancing something with help from AI.
    • AI experience UI icon rh-ui-icon-ai-experience: Use this one when none of these other icons fit.
  • Example: A button that will cause a pop-up to appear with AI-generated troubleshooting assistance.
  • Don't create new AI icons.

Download them in Brand Portal

UI icon do's and don'ts

  • AI-assisted summary with sparkle icon
    Use UI icons with sparkles when indicating that the information it appears with was generated by AI.
  • Crossed out info alert with "View-only AI chat" message
    Don't use UI icons with sparkles when the information it is paired with was not generated by AI. Use the normal (no sparkle) UI icon instead.

Icon don'ts

  • Crossed out folder icon with a sparkle
    Don't create new UI icons with sparkles attached to them.
  • Crossed out brain and robot icons
    Don't use brains or robots to represent AI features. The existing brain UI icon represents learning and education, and a robot icon should only be used for chatbot avatars.
  • Crossed out AI troubleshooting and AI chat icons that have been re-colored
    Don't change the colors of the UI icons or modify them. Use them in the same colors as other UI icons in the interface.
  • Crossed out AI search button without disclosure
    Don't use UI icons with sparkles without including a disclosure about the use of AI.
  • Crossed out Red Hat OpenShift product/technology icon with sparkle
    Don't add an AI sparkle to a technology icon.
  • Crossed out "new" tag/label element with sparkle icon
    Don't use icons with the AI sparkle to indicate "new." Use rh-ui-icon-new instead.

Note

To request a new icon, chat us on Slack at #help-brand.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify