> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: b57dc3b3-ff64-417d-abbe-38acf8fcc254
---

# Icon

> Learn about the Icon component for use in UI extensions.

export const IconGrid = ({searchable = false}) => {
  const BASE_URL = 'https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-icons/trellis';
  const THRESHOLD = 20;
  const [searchTerm, setSearchTerm] = useState('');
  const ICON_NAMES = [{
    name: 'add',
    image: 'Add',
    alias: ['plus']
  }, {
    name: 'appointment',
    image: 'Appointment',
    alias: ['calendar']
  }, {
    name: 'approvals',
    image: 'Approvals',
    alias: ['check']
  }, {
    name: 'artificialIntelligence',
    image: 'ArtificialIntelligence',
    alias: ['ai']
  }, {
    name: 'artificialIntelligenceEnhanced',
    image: 'ArtificialIntelligenceEnhanced',
    alias: ['ai-enhanced']
  }, {
    name: 'attach',
    image: 'Attach',
    alias: ['paperclip']
  }, {
    name: 'bank',
    image: 'Bank'
  }, {
    name: 'block',
    image: 'Block'
  }, {
    name: 'book',
    image: 'Book'
  }, {
    name: 'bulb',
    image: 'Bulb'
  }, {
    name: 'calling',
    image: 'Calling',
    alias: ['phone']
  }, {
    name: 'callingHangup',
    image: 'CallingHangup',
    alias: ['phone']
  }, {
    name: 'callingMade',
    image: 'CallingMade',
    alias: ['phone']
  }, {
    name: 'callingMissed',
    image: 'CallingMissed',
    alias: ['phone']
  }, {
    name: 'callingVoicemail',
    image: 'CallingVoicemail',
    alias: ['phone']
  }, {
    name: 'callTranscript',
    image: 'CallTranscript',
    alias: ['phone']
  }, {
    name: 'campaigns',
    image: 'Campaigns'
  }, {
    name: 'cap',
    image: 'Cap'
  }, {
    name: 'checkCircle',
    image: 'CheckCircle'
  }, {
    name: 'circleFilled',
    image: 'CircleFilled'
  }, {
    name: 'circleHollow',
    image: 'CircleHollow'
  }, {
    name: 'clock',
    image: 'Clock',
    alias: ['time']
  }, {
    name: 'comment',
    image: 'Comment'
  }, {
    name: 'contact',
    image: 'Contact'
  }, {
    name: 'copy',
    image: 'Copy'
  }, {
    name: 'crm',
    image: 'Crm'
  }, {
    name: 'dataSync',
    image: 'DataSync',
    alias: ['arrow']
  }, {
    name: 'date',
    image: 'Date'
  }, {
    name: 'delay',
    image: 'Delay',
    alias: ['time']
  }, {
    name: 'delete',
    image: 'Delete'
  }, {
    name: 'description',
    image: 'Description'
  }, {
    name: 'developerProjects',
    image: 'DeveloperProjects'
  }, {
    name: 'documents',
    image: 'Documents'
  }, {
    name: 'downCarat',
    image: 'DownCarat',
    alias: ['arrow']
  }, {
    name: 'download',
    image: 'Download'
  }, {
    name: 'edit',
    image: 'Edit'
  }, {
    name: 'ellipses',
    image: 'Ellipses'
  }, {
    name: 'email',
    image: 'Email'
  }, {
    name: 'emailOpen',
    image: 'EmailOpen'
  }, {
    name: 'emailThreadedReplies',
    image: 'EmailThreadedReplies'
  }, {
    name: 'enrichment',
    image: 'Enrichment'
  }, {
    name: 'enroll',
    image: 'Enroll'
  }, {
    name: 'exclamation',
    image: 'Exclamation',
    alias: ['!']
  }, {
    name: 'exclamationCircle',
    image: 'ExclamationCircle'
  }, {
    name: 'facebook',
    image: 'Facebook',
    alias: ['social']
  }, {
    name: 'faceHappy',
    image: 'FaceHappy'
  }, {
    name: 'faceHappyFilled',
    image: 'FaceHappyFilled'
  }, {
    name: 'faceNeutral',
    image: 'FaceNeutral'
  }, {
    name: 'faceNeutralFilled',
    image: 'FaceNeutralFilled'
  }, {
    name: 'faceSad',
    image: 'FaceSad'
  }, {
    name: 'faceSadFilled',
    image: 'FaceSadFilled'
  }, {
    name: 'favoriteHollow',
    image: 'FavoriteHollow'
  }, {
    name: 'file',
    image: 'File'
  }, {
    name: 'filledXCircleIcon',
    image: 'FilledXCircleIcon'
  }, {
    name: 'filter',
    image: 'Filter'
  }, {
    name: 'flame',
    image: 'Flame',
    alias: ['fire']
  }, {
    name: 'folder',
    image: 'Folder'
  }, {
    name: 'folderOpen',
    image: 'FolderOpen'
  }, {
    name: 'forward',
    image: 'Forward',
    alias: ['arrow']
  }, {
    name: 'gauge',
    image: 'Gauge'
  }, {
    name: 'generateChart',
    image: 'GenerateChart'
  }, {
    name: 'gift',
    image: 'Gift'
  }, {
    name: 'globe',
    image: 'Globe'
  }, {
    name: 'globeLine',
    image: 'GlobeLine'
  }, {
    name: 'goal',
    image: 'Goal'
  }, {
    name: 'googlePlus',
    image: 'GooglePlus',
    alias: ['social']
  }, {
    name: 'guidedActions',
    image: 'GuidedActions'
  }, {
    name: 'hash',
    image: 'Hash',
    alias: ['number', 'pound']
  }, {
    name: 'hide',
    image: 'Hide-1',
    alias: ['visible', 'eye']
  }, {
    name: 'home',
    image: 'Home-1'
  }, {
    name: 'hubDB',
    image: 'HubDB'
  }, {
    name: 'image',
    image: 'Image'
  }, {
    name: 'imageGallery',
    image: 'ImageGallery'
  }, {
    name: 'inbox',
    image: 'Inbox'
  }, {
    name: 'info',
    image: 'Info'
  }, {
    name: 'infoNoCircle',
    image: 'InfoNoCircle'
  }, {
    name: 'insertVideo',
    image: 'InsertVideo'
  }, {
    name: 'instagram',
    image: 'Instagram',
    alias: ['social']
  }, {
    name: 'integrations',
    image: 'Integrations'
  }, {
    name: 'invoice',
    image: 'Invoice-1'
  }, {
    name: 'key',
    image: 'Key'
  }, {
    name: 'language',
    image: 'Globe'
  }, {
    name: 'left',
    image: 'Left',
    alias: ['arrow']
  }, {
    name: 'lessCircle',
    image: 'LessCircle'
  }, {
    name: 'lesson',
    image: 'Lesson'
  }, {
    name: 'light',
    image: 'Light'
  }, {
    name: 'link',
    image: 'Link'
  }, {
    name: 'linkedin',
    image: 'Linkedin',
    alias: ['social']
  }, {
    name: 'listView',
    image: 'ListView'
  }, {
    name: 'location',
    image: 'Location'
  }, {
    name: 'locked',
    image: 'Locked'
  }, {
    name: 'mention',
    image: 'Mention',
    alias: ['at']
  }, {
    name: 'messages',
    image: 'Messages',
    alias: ['chat']
  }, {
    name: 'mobile',
    image: 'Mobile'
  }, {
    name: 'moreCircle',
    image: 'MoreCircle',
    alias: ['plus']
  }, {
    name: 'notEditable',
    image: 'NotEditable'
  }, {
    name: 'notification',
    image: 'Notification',
    alias: ['bell']
  }, {
    name: 'notificationOff',
    image: 'NotificationOff',
    alias: ['bell']
  }, {
    name: 'objectAssociations',
    image: 'ObjectAssociations',
    alias: ['arrow']
  }, {
    name: 'objectAssociationsManyToMany',
    image: 'ObjectAssociationsManyToMany',
    alias: ['arrow']
  }, {
    name: 'objectAssociationsManyToOne',
    image: 'ObjectAssociationsManyToOne',
    alias: ['arrow']
  }, {
    name: 'office365',
    image: 'Office365',
    alias: ['email', 'outlook']
  }, {
    name: 'order',
    image: 'Order'
  }, {
    name: 'paymentSubscriptions',
    image: 'PaymentSubscriptions'
  }, {
    name: 'pin',
    image: 'Pin'
  }, {
    name: 'pinterest',
    image: 'Pinterest',
    alias: ['social']
  }, {
    name: 'powerPointFile',
    image: 'PowerPointFile'
  }, {
    name: 'presentation',
    image: 'Presentation'
  }, {
    name: 'product',
    image: 'Product'
  }, {
    name: 'publish',
    image: 'Publish'
  }, {
    name: 'question',
    image: 'Question',
    alias: ['?']
  }, {
    name: 'questionAnswer',
    image: 'QuestionAnswer',
    alias: ['?']
  }, {
    name: 'questionCircle',
    image: 'QuestionCircle',
    alias: ['?']
  }, {
    name: 'quickbooks',
    image: 'Quickbooks',
    alias: ['accounting']
  }, {
    name: 'quote',
    image: 'Quote'
  }, {
    name: 'readMore',
    image: 'ReadMore'
  }, {
    name: 'readOnlyView',
    image: 'ReadOnlyView'
  }, {
    name: 'realEstateListing',
    image: 'RealEstateListing'
  }, {
    name: 'recentlySelected',
    image: 'RecentlySelected'
  }, {
    name: 'record',
    image: 'Record'
  }, {
    name: 'redo',
    image: 'Redo',
    alias: ['arrow']
  }, {
    name: 'refresh',
    image: 'Refresh',
    alias: ['sync']
  }, {
    name: 'registration',
    image: 'Registration'
  }, {
    name: 'remove',
    image: 'Remove'
  }, {
    name: 'replace',
    image: 'Replace'
  }, {
    name: 'reports',
    image: 'Reports'
  }, {
    name: 'right',
    image: 'Right',
    alias: ['arrow']
  }, {
    name: 'robot',
    image: 'Robot'
  }, {
    name: 'rotate',
    image: 'Rotate',
    alias: ['arrow']
  }, {
    name: 'rss',
    image: 'Rss'
  }, {
    name: 'salesQuote',
    image: 'SalesQuote'
  }, {
    name: 'salesTemplates',
    image: 'SalesTemplates'
  }, {
    name: 'save',
    image: 'Save'
  }, {
    name: 'search',
    image: 'Search'
  }, {
    name: 'send',
    image: 'Send'
  }, {
    name: 'sequences',
    image: 'Sequences'
  }, {
    name: 'settings',
    image: 'Settings'
  }, {
    name: 'shoppingCart',
    image: 'ShoppingCart'
  }, {
    name: 'signal',
    image: 'Signal'
  }, {
    name: 'signalPoor',
    image: 'SignalPoor'
  }, {
    name: 'signature',
    image: 'Signature'
  }, {
    name: 'snooze',
    image: 'Snooze',
    alias: ['sleep']
  }, {
    name: 'sortAlpAsc',
    image: 'SortAlpAsc',
    alias: ['arrow']
  }, {
    name: 'sortAlpDesc',
    image: 'SortAlpDesc',
    alias: ['arrow']
  }, {
    name: 'sortAmtAsc',
    image: 'SortAmtAsc',
    alias: ['arrow']
  }, {
    name: 'sortAmtDesc',
    image: 'SortAmtDesc',
    alias: ['arrow']
  }, {
    name: 'sortNumAsc',
    image: 'SortNumAsc',
    alias: ['arrow']
  }, {
    name: 'sortNumDesc',
    image: 'SortNumDesc',
    alias: ['arrow']
  }, {
    name: 'sortTableAsc',
    image: 'SortTableAsc',
    alias: ['arrow']
  }, {
    name: 'sortTableDesc',
    image: 'SortTableDesc',
    alias: ['arrow']
  }, {
    name: 'spellCheck',
    image: 'SpellCheck'
  }, {
    name: 'sprocket',
    image: 'Sprocket'
  }, {
    name: 'star',
    image: 'Star'
  }, {
    name: 'stopRecord',
    image: 'StopRecord'
  }, {
    name: 'strike',
    image: 'Strike'
  }, {
    name: 'styles',
    image: 'Styles'
  }, {
    name: 'success',
    image: 'Success',
    alias: ['check']
  }, {
    name: 'tablet',
    image: 'Tablet'
  }, {
    name: 'tag',
    image: 'Tag'
  }, {
    name: 'tasks',
    image: 'Tasks'
  }, {
    name: 'test',
    image: 'Test'
  }, {
    name: 'text',
    image: 'Text'
  }, {
    name: 'textBodyExpanded',
    image: 'TextBodyExpanded'
  }, {
    name: 'textColor',
    image: 'TextColor'
  }, {
    name: 'textDataType',
    image: 'TextDataType'
  }, {
    name: 'textSnippet',
    image: 'TextSnippet-1'
  }, {
    name: 'thumbsDown',
    image: 'ThumbsDown'
  }, {
    name: 'thumbsUp',
    image: 'ThumbsUp'
  }, {
    name: 'ticket',
    image: 'Ticket'
  }, {
    name: 'translate',
    image: 'Translate'
  }, {
    name: 'trophy',
    image: 'Trophy'
  }, {
    name: 'twitter',
    image: 'Twitter',
    alias: ['social']
  }, {
    name: 'undo',
    image: 'Undo',
    alias: ['arrow']
  }, {
    name: 'upCarat',
    image: 'UpCarat',
    alias: ['arrow']
  }, {
    name: 'upload',
    image: 'Upload'
  }, {
    name: 'video',
    image: 'Video'
  }, {
    name: 'videoFile',
    image: 'VideoFile'
  }, {
    name: 'videoPlayerSubtitles',
    image: 'VideoPlayerSubtitles'
  }, {
    name: 'view',
    image: 'View',
    alias: ['eye', 'visible']
  }, {
    name: 'viewDetails',
    image: 'ViewDetails'
  }, {
    name: 'warning',
    image: 'Warning'
  }, {
    name: 'website',
    image: 'Website'
  }, {
    name: 'workflows',
    image: 'Workflows'
  }, {
    name: 'x',
    image: 'X',
    alias: ['social']
  }, {
    name: 'xCircle',
    image: 'XCircle'
  }, {
    name: 'xing',
    image: 'Xing',
    alias: ['social']
  }, {
    name: 'youtube',
    image: 'Youtube',
    alias: ['social']
  }, {
    name: 'youtubePlay',
    image: 'YoutubePlay',
    alias: ['social']
  }, {
    name: 'zoomIn',
    image: 'ZoomIn'
  }, {
    name: 'zoomOut',
    image: 'ZoomOut'
  }];
  const icons = ICON_NAMES.map(item => ({
    ...item,
    isWide: item.name.length > THRESHOLD
  }));
  const filteredIcons = searchTerm ? icons.filter(icon => {
    const term = searchTerm.toLowerCase();
    const nameMatch = icon.name.toLowerCase().includes(term);
    const aliasMatch = icon.alias?.some(a => a.toLowerCase().includes(term));
    return nameMatch || aliasMatch;
  }) : icons;
  const handleCopy = (name, event) => {
    const target = event.currentTarget;
    navigator.clipboard.writeText(name).then(() => {
      target.classList.add('copied');
      setTimeout(() => target.classList.remove('copied'), 1500);
    });
  };
  return <div className="icon-grid-container">
      {searchable && <div className="filter-table-search">
          <input type="text" placeholder="Search icons..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="filter-table-input" />
          <span className="filter-table-input-icon">
            <Icon icon="magnifying-glass" size="16" />
          </span>
        </div>}
      <div className="card-grid icon-grid">
        {filteredIcons.length > 0 ? filteredIcons.map(icon => <div key={icon.name} className={icon.isWide ? 'icon-wide' : undefined} onClick={e => handleCopy(icon.name, e)} onKeyDown={e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleCopy(icon.name, e);
    }
  }} tabIndex={0} role="button" aria-label={`Copy ${icon.name} to clipboard`}>
              <Card img={`${BASE_URL}/${icon.image}.png`}>
                <code>{icon.name}</code>
              </Card>
            </div>) : <div className="icon-grid-empty">
            No icons found for "{searchTerm}"
          </div>}
      </div>
    </div>;
};

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

Use the `Icon` component to render a visual icon within other components. It can generally be used inside most components, excluding ones that don't support child components (e.g., the `Input` component does not support icons).

Always pair icons with text. If that's not possible, include the `screenReaderText` prop to convey the icon's meaning for users with screen readers.

<Frame>
  <img width="350" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-extension-ui-component-icon-examples.png" alt="Example of the Icon component used in a UI extension to add icons to an alert, a button, and alongside text." />
</Frame>

```jsx theme={null}
import { Alert, Button, Flex, Icon, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Flex align="start" direction="column" gap="sm">
      <Alert title="Sync complete" variant="success">
        <Icon name="success" /> 42 contacts updated
      </Alert>
      <Button variant="primary">
        <Icon name="refresh" /> Sync contacts
      </Button>
      <Text>
        <Icon name="clock" /> Last synced 5 minutes ago
      </Text>
    </Flex>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="Icon">
  <ComponentProp name="name" required={true} type={<><code>"add"</code> | <code>"appointment"</code> | <code>"approvals"</code> | <code>"artificialIntelligence"</code> | <code>"artificialIntelligenceEnhanced"</code> | <code>"attach"</code> | <code>"bank"</code> | <code>"block"</code> | <code>"book"</code> | <code>"bulb"</code> | <code>"calling"</code> | <code>"callingHangup"</code> | <code>"callingMade"</code> | <code>"callingMissed"</code> | <code>"callingVoicemail"</code> | <code>"callTranscript"</code> | <code>"campaigns"</code> | <code>"cap"</code> | <code>"checkCircle"</code> | <code>"circleFilled"</code> | <code>"circleHollow"</code> | <code>"clock"</code> | <code>"comment"</code> | <code>"contact"</code> | <code>"copy"</code> | <code>"crm"</code> | <code>"dataSync"</code> | <code>"date"</code> | <code>"delay"</code> | <code>"delete"</code> | <code>"description"</code> | <code>"developerProjects"</code> | <code>"documents"</code> | <code>"downCarat"</code> | <code>"download"</code> | <code>"edit"</code> | <code>"ellipses"</code> | <code>"email"</code> | <code>"emailOpen"</code> | <code>"emailThreadedReplies"</code> | <code>"enrichment"</code> | <code>"enroll"</code> | <code>"exclamation"</code> | <code>"exclamationCircle"</code> | <code>"facebook"</code> | <code>"faceHappy"</code> | <code>"faceHappyFilled"</code> | <code>"faceNeutral"</code> | <code>"faceNeutralFilled"</code> | <code>"faceSad"</code> | <code>"faceSadFilled"</code> | <code>"favoriteHollow"</code> | <code>"file"</code> | <code>"filledXCircleIcon"</code> | <code>"filter"</code> | <code>"flame"</code> | <code>"folder"</code> | <code>"folderOpen"</code> | <code>"forward"</code> | <code>"gauge"</code> | <code>"generateChart"</code> | <code>"gift"</code> | <code>"globe"</code> | <code>"globeLine"</code> | <code>"goal"</code> | <code>"googlePlus"</code> | <code>"guidedActions"</code> | <code>"hash"</code> | <code>"hide"</code> | <code>"home"</code> | <code>"hubDB"</code> | <code>"image"</code> | <code>"imageGallery"</code> | <code>"inbox"</code> | <code>"info"</code> | <code>"infoNoCircle"</code> | <code>"insertVideo"</code> | <code>"instagram"</code> | <code>"integrations"</code> | <code>"invoice"</code> | <code>"key"</code> | <code>"language"</code> | <code>"left"</code> | <code>"lessCircle"</code> | <code>"lesson"</code> | <code>"light"</code> | <code>"link"</code> | <code>"linkedin"</code> | <code>"listView"</code> | <code>"location"</code> | <code>"locked"</code> | <code>"mention"</code> | <code>"messages"</code> | <code>"mobile"</code> | <code>"moreCircle"</code> | <code>"notEditable"</code> | <code>"notification"</code> | <code>"notificationOff"</code> | <code>"objectAssociations"</code> | <code>"objectAssociationsManyToMany"</code> | <code>"objectAssociationsManyToOne"</code> | <code>"office365"</code> | <code>"order"</code> | <code>"paymentSubscriptions"</code> | <code>"pin"</code> | <code>"pinterest"</code> | <code>"powerPointFile"</code> | <code>"presentation"</code> | <code>"product"</code> | <code>"publish"</code> | <code>"question"</code> | <code>"questionAnswer"</code> | <code>"questionCircle"</code> | <code>"quickbooks"</code> | <code>"quote"</code> | <code>"readMore"</code> | <code>"readOnlyView"</code> | <code>"realEstateListing"</code> | <code>"recentlySelected"</code> | <code>"record"</code> | <code>"redo"</code> | <code>"refresh"</code> | <code>"registration"</code> | <code>"remove"</code> | <code>"replace"</code> | <code>"reports"</code> | <code>"right"</code> | <code>"robot"</code> | <code>"rotate"</code> | <code>"rss"</code> | <code>"salesQuote"</code> | <code>"salesTemplates"</code> | <code>"save"</code> | <code>"search"</code> | <code>"send"</code> | <code>"sequences"</code> | <code>"settings"</code> | <code>"shoppingCart"</code> | <code>"signal"</code> | <code>"signalPoor"</code> | <code>"signature"</code> | <code>"snooze"</code> | <code>"sortAlpAsc"</code> | <code>"sortAlpDesc"</code> | <code>"sortAmtAsc"</code> | <code>"sortAmtDesc"</code> | <code>"sortNumAsc"</code> | <code>"sortNumDesc"</code> | <code>"sortTableAsc"</code> | <code>"sortTableDesc"</code> | <code>"spellCheck"</code> | <code>"sprocket"</code> | <code>"star"</code> | <code>"stopRecord"</code> | <code>"strike"</code> | <code>"styles"</code> | <code>"success"</code> | <code>"tablet"</code> | <code>"tag"</code> | <code>"tasks"</code> | <code>"test"</code> | <code>"text"</code> | <code>"textBodyExpanded"</code> | <code>"textColor"</code> | <code>"textDataType"</code> | <code>"textSnippet"</code> | <code>"thumbsDown"</code> | <code>"thumbsUp"</code> | <code>"ticket"</code> | <code>"translate"</code> | <code>"trophy"</code> | <code>"twitter"</code> | <code>"undo"</code> | <code>"upCarat"</code> | <code>"upload"</code> | <code>"video"</code> | <code>"videoFile"</code> | <code>"videoPlayerSubtitles"</code> | <code>"view"</code> | <code>"viewDetails"</code> | <code>"warning"</code> | <code>"website"</code> | <code>"workflows"</code> | <code>"x"</code> | <code>"xCircle"</code> | <code>"xing"</code> | <code>"youtube"</code> | <code>"youtubePlay"</code> | <code>"zoomIn"</code> | <code>"zoomOut"</code></>} description={<>Sets the icon to display. See <a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon#available-icons">all available icons</a>.</>} />

  <ComponentProp name="color" required={false} type={<><code>"alert"</code> | <code>"inherit"</code> | <code>"success"</code> | <code>"warning"</code></>} description={<>The color of the icon. See the <a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon#colors">colors section</a> for details.</>} defaultValue={<><code>"inherit"</code></>} />

  <ComponentProp name="screenReaderText" required={false} type={<><code>string</code></>} description={<>Sets the text that screen readers will read for the icon.</>} />

  <ComponentProp name="size" required={false} type={<><code>"large"</code> | <code>"lg"</code> | <code>"md"</code> | <code>"medium"</code> | <code>"sm"</code> | <code>"small"</code></>} description={<>By default, the size of the icon is set automatically based on the parent component. If you need to override the default size, you can specify one to use instead.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## Colors

Using the `color` prop, you can set an icon to one of the following colors:

<div class="icon-colors-grid icon-colors-grid" role="img" aria-label="Available icon colors demonstration">
  <div class="icon-example">
    <div class="icon-label">Default</div>

    <div class="icon-container">
      <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-icons/ui-component-icon-color-default.svg" />
    </div>

    <div class="icon-value">`color="inherit"`</div>
  </div>

  <div class="icon-example">
    <div class="icon-label">Alert</div>

    <div class="icon-container">
      <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-icons/ui-component-icon-color-alert.svg" />
    </div>

    <div class="icon-value">`color="alert"`</div>
  </div>

  <div class="icon-example">
    <div class="icon-label">Warning</div>

    <div class="icon-container">
      <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-icons/ui-component-icon-color-warning.svg" />
    </div>

    <div class="icon-value">`color="warning"`</div>
  </div>

  <div class="icon-example">
    <div class="icon-label">Success</div>

    <div class="icon-container">
      <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-icons/ui-component-icon-color-success.svg" />
    </div>

    <div class="icon-value">`color="success"`</div>
  </div>
</div>

## Spacing

By default, spacing is not added around the icon. However, To add a space between the icon and adjacent text, you can manually add a space with the space bar, or by using `&nbsp;` and `{" "}` as shown below.

```jsx highlight={3, 6, 9} theme={null}
<>
  <Alert title="Sync complete" variant="success">
    <Icon name="success" /> 42 contacts updated
  </Alert>
  <Button variant="primary">
    <Icon name="refresh" />&nbsp;Sync contacts
  </Button>
  <Text>
    <Icon name="clock" />{" "}Last synced 5 minutes ago
  </Text>
</>
```

## Available icons

Below are the currently available icons and their `name` values, which you can copy by clicking the icon.

<IconGrid searchable={true} />

## Related components

* [Alert](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert)
* [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag)
* [Text](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text)