RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Not Needed

Try in Cursor

Icon

Icon wrapper.

Basic Usage

Wrap any icon component in HLIcon and control its size and color from one place.

<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>

Color and Custom Classes

Set color with a hex value, CSS color name, or a design-token CSS variable, and pass Tailwind/utility classes via class — they are forwarded to the rendered element.

<template>
  <HLIcon size="20" color="var(--primary-700)" class="mr-2"><UserPlus01Icon /></HLIcon>
</template>

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

Accessibility

• HLIcon renders as an <i role="img"> element and applies a default aria-label ("Alternative text for image not provided", localized) whenever you don't supply your own. Icons that convey meaning must override this default with a descriptive aria-label (or reference surrounding text via aria-labelledby).
• Decorative icons should set aria-hidden="true" (this overrides the default aria-label so the placeholder text is not announced).
• role="img" is already set for you, so you do not need to add it yourself.

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 in pixels.
color	string | undefined	undefined	Icon color. Accepts hex ('#FFF'), RGB/RGBA ('rgb(255, 0, 0)'), CSS colors ('red'), or CSS variables ('var(--primary-500)')

INFO

Any extra attributes you pass to HLIcon — class, style, aria-*, data-*, event listeners like @click, etc. — are forwarded to the underlying <i role="img"> element.

Slots

Name	Parameters	Description
default	()	The default slot