Icons

Lucide for this port. Import named icons from @lucide/vue and render with <Icon>.

Import

Use <Icon> in product UI so size and stroke stay consistent.


        
          1
          
          import { Search } from '@lucide/vue'
        

          2
          
           
        

          3
          
          // Preferred in product UI
        

          4
          
          <Icon :icon="Search" :size="14" />

Sizes

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


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

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

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

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

In a button


        
          1
          
          <Button size="small">
        

          2
          
            <template #prefix>
        

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

          4
          
            </template>
        

          5
          
            Add New
        

          6
          
          </Button>

Catalog (sample)

Plus

Copy

Settings

Trash2

Globe