Accessibility: Full

Translations: Not Needed

Migration Guide: Not Needed

Icon

Icon wrapper.

Basic Usage

Vue

<template>
  <HLIcon id="example-icon" size="28" color="#26a6a6"><UserPlus01Icon /></HLIcon>
</template>

<script setup lang="ts">
  import { HLIcon } from '@platform-ui/highrise'
  import { UserPlus01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Accessibility

• Icons that convey meaning must set aria-label / title or rely on surrounding text via aria-labelledby; decorative icons should include aria-hidden="true".
• When an icon stands alone (for example, inside a button), set role="img" so the accessible name is announced once.

Imports

import { HLIcon } from '@platform-ui/highrise'
import { UserPlus01Icon } from '@gohighlevel/ghl-icons/24/outline'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The unique identifier of the element
size	string | number	'16'	Icon size.
color	string | undefined	undefined	Icon color. Accepts hex ('#FFF'), RGB/RGBA ('rgb(255, 0, 0)'), CSS colors ('red'), or CSS variables ('var(--primary-500)')

Slots

Name	Parameters	Description
default	()	The default slot