Icon

Icon component provides a consistent way to display icons with various sizes, tones, and variants throughout the application.

Key Features

• Multiple Sizes:Seven different size options from 2xs to 2xl for flexible scaling.
• Semantic Tones:Five different tones for status representation: success, error, info, pending, and caution.
• Visual Variants:Three styling variants: primary (filled), secondary (outlined), and tertiary (plain).
• Iconify Integration:Seamless integration with Iconify's extensive icon library.
• Consistent Styling:Standardized appearance with proper spacing and alignment.

Basic Usage

A basic icon requires an ID and icon name from the Iconify library.

<spr-icon id="basic-icon" icon="ph:user" />

Sizes

Icons can be displayed in different sizes to match various UI contexts.

<template>
  <spr-icon id="icon-2xs" icon="ph:user" size="2xs" />
  <spr-icon id="icon-xs" icon="ph:user" size="xs" />
  <spr-icon id="icon-sm" icon="ph:user" size="sm" />
  <spr-icon id="icon-md" icon="ph:user" size="md" />
  <spr-icon id="icon-lg" icon="ph:user" size="lg" />
  <spr-icon id="icon-xl" icon="ph:user" size="xl" />
  <spr-icon id="icon-2xl" icon="ph:user" size="2xl" />
</template>

Tones and Variants

Icons can be styled with different tones and variants to convey meaning or status.

Primary Variant (Filled)

Secondary Variant (Outlined)

Tertiary Variant (Plain)

<template>
  <!-- Primary Variant -->
  <spr-icon id="success-primary" icon="ph:check-circle" tone="success" variant="primary" />

  <!-- Secondary Variant -->
  <spr-icon id="info-secondary" icon="ph:info" tone="info" variant="secondary" />

  <!-- Tertiary Variant -->
  <spr-icon id="warning-tertiary" icon="ph:warning" tone="caution" variant="tertiary" />
</template>

API Reference

Props

Name	Description	Type	Default
id	Unique identifier for the icon. Required for proper functionality.	string	-
icon	The Iconify icon name to display (e.g., 'ph:user', 'ph:check-circle').	string	''
size	Size of the icon. Available options: 2xs: Extra extra small (16px) xs: Extra small (20px) sm: Small (24px) md: Medium (36px) lg: Large (40px) xl: Extra large (56px) 2xl: Extra extra large (80px)	'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'
tone	Color tone of the icon. Available options: success: Green, for positive actions/states error: Red, for errors/failures info: Blue, for information pending: Yellow, for in-progress states caution: Orange, for warnings	'success' | 'error' | 'info' | 'pending' | 'caution'	-
variant	Visual style of the icon: primary: Filled background secondary: Outlined with light background tertiary: Plain icon without background	'primary' | 'secondary' | 'tertiary'	-

Product Uses