Icons

Hugeicons for this port. Import icon data from @hugeicons/core-free-icons and render with <Icon> or HugeiconsIcon.

Import

Never import icon arrays from @hugeicons/vue. That package only exports the renderer. Wrong imports break HMR and SSR.

import { Search01Icon } from '@hugeicons/core-free-icons'

import { HugeiconsIcon } from '@hugeicons/vue'

// Preferred in product UI

Sizes

Match the control. 14px on h-8, 12px on meta rows, 32px only inside EmptyStateIcon.


        
          1
          
          <Icon :icon="Search01Icon" :size="12" />
        

          2
          
          <Icon :icon="Search01Icon" :size="14" />
        

          3
          
          <Icon :icon="Search01Icon" :size="16" />
        

          4
          
          <Icon :icon="Search01Icon" :size="20" />

In a button


        
          1
          
          <Button size="small">
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon="Add01Icon" :size="14" />
        

          4
          
            </template>
        

          5
          
            Add New
        

          6
          
          </Button>

Catalog (sample)

Search01Icon

Add01Icon

Copy01Icon

Settings02Icon

Delete02Icon