pages._explore-components-media-icon.title

pages._explore.sections.basic-usage.title

html

<Icon name="solar:home-bold" />

typescript

<script setup lang="ts">
// Basic usage with default size (MD) and color (ON_SURFACE)
// Uses Solar icon set from Iconify
</script>

pages._explore.sections.complex-usage.title

html

<Icon 
    name="solar:star-bold-duotone"
    :size="IconSizes.XL"
    :color="IconColors.PRIMARY"
/>

typescript

<script setup lang="ts">
import { IconSizes, IconColors } from '#core-types/components/media/icon'

// Custom size and color configuration
</script>

Icon Sizes

XXS

html

<!-- XXS (size-3.5) -->
<Icon name="solar:heart-bold" :size="IconSizes.XXS" />

<!-- XS (size-4) -->
<Icon name="solar:heart-bold" :size="IconSizes.XS" />

<!-- SM (size-5) -->
<Icon name="solar:heart-bold" :size="IconSizes.SM" />

<!-- MD (size-6, default) -->  
<Icon name="solar:heart-bold" :size="IconSizes.MD" />

<!-- LG (size-7) -->
<Icon name="solar:heart-bold" :size="IconSizes.LG" />

<!-- XL (size-8) -->
<Icon name="solar:heart-bold" :size="IconSizes.XL" />

typescript

<script setup lang="ts">
import { IconSizes } from '#core-types/components/media/icon'
</script>

Icon Colors

PRIMARY

SUCCESS

WARNING

ERROR

INFO

ON_SURFACE

SURFACE_RAISED

SURFACE_OVERLAY

html

<!-- Surface colors -->
<Icon name="solar:palette-bold" :color="IconColors.SURFACE" />
<Icon name="solar:palette-bold" :color="IconColors.SURFACE_RAISED" />
<Icon name="solar:palette-bold" :color="IconColors.SURFACE_OVERLAY" />

<!-- Semantic colors -->
<Icon name="solar:palette-bold" :color="IconColors.PRIMARY" />
<Icon name="solar:palette-bold" :color="IconColors.SUCCESS" />
<Icon name="solar:palette-bold" :color="IconColors.WARNING" />
<Icon name="solar:palette-bold" :color="IconColors.ERROR" />

<!-- On-surface colors -->
<Icon name="solar:palette-bold" :color="IconColors.ON_SURFACE" />
<Icon name="solar:palette-bold" :color="IconColors.ON_PRIMARY" />
<Icon name="solar:palette-bold" :color="IconColors.ON_SUCCESS" />

typescript

<script setup lang="ts">
import { IconColors } from '#core-types/components/media/icon'
</script>

Popular Icons

home-bold

settings-bold

user-bold

search-linear

add-circle-bold

trash-bin-trash-bold

check-circle-bold

close-circle-bold

html

<!-- UI Icons -->
<Icon name="solar:home-bold" />
<Icon name="solar:settings-bold" />
<Icon name="solar:user-bold" />
<Icon name="solar:search-linear" />

<!-- Actions -->
<Icon name="solar:add-circle-bold" />
<Icon name="solar:trash-bin-trash-bold" />
<Icon name="solar:pen-new-square-bold" />
<Icon name="solar:download-minimalistic-bold" />

<!-- Status -->
<Icon name="solar:check-circle-bold" :color="IconColors.SUCCESS" />
<Icon name="solar:close-circle-bold" :color="IconColors.ERROR" />
<Icon name="solar:info-circle-bold" :color="IconColors.INFO" />
<Icon name="solar:danger-triangle-bold" :color="IconColors.WARNING" />

typescript

<script setup lang="ts">
import { IconColors } from '#core-types/components/media/icon'

// Using Solar icon set from Iconify
// Browse icons at: https://icones.js.org/
</script>

pages._explore.sections.props.title

Prop	Default	Type
name	'solar:hashtag-square-linear'	string
size	IconSizes.MD	IconSizes
color	IconColors.ON_SURFACE	IconColors

pages._explore.sections.types.title

Name	Type	Options
IconSizes	enum	XXS \| XS \| SM \| MD \| LG \| XL
IconColors	enum	SURFACE \| SURFACE_SUNKEN \| SURFACE_RAISED \| SURFACE_OVERLAY \| PRIMARY \| SECONDARY \| SUCCESS \| WARNING \| ERROR \| INFO \| ON_SURFACE \| ON_SURFACE_SUNKEN \| ON_SURFACE_RAISED \| ON_SURFACE_OVERLAY \| ON_PRIMARY \| ON_SECONDARY \| ON_SUCCESS \| ON_WARNING \| ON_ERROR \| ON_INFO