logo

Icon

Description

The Icon component is a versatile and customizable element for displaying various icons with different sizes and colors. It uses SVG icons and allows for hover effects.

Parameters

Name Type Default Description
icon string home The name of the icon to display. This should correspond to an SVG file in the components.uxlibrary.icons directory.
color string primary The color of the icon. This should be a valid Tailwind color class name.
hoverColor string gray-300 The color of the icon on hover. This should be a valid Tailwind color class name.
class string Additional CSS classes to be applied to the icon container.
size string md The size of the icon. Valid values are xs, sm, md, lg, xl. This is overridden if a specific size prop is set to true.
xs boolean false If true, sets the icon size to extra small (w-4 h-4).
sm boolean false If true, sets the icon size to small (w-5 h-5).
md boolean false If true, sets the icon size to medium (w-6 h-6).
lg boolean false If true, sets the icon size to large (w-8 h-8).
xl boolean false If true, sets the icon size to extra large (w-12 h-12).
attributes array [] Additional HTML attributes to be applied to the icon container.

Example

Sizes
xs
sm
md
lg
xl
ai-stars
airplane-alt
airplane
arrows-back
badge-seal
base
bookmark
calendar-plus
check
circle-check
circle-checked
circle-x
company
connection
contact-recruiter
cross-square
cv
delete
dollar-circle
download
employer
error
feedback
filter
home
hospital
linkedin
livability
location
logout
mail
map-marker
message-bubbles
message
minus-small
minus
news
page
pencil
phone
plus-small
plus
printer
question-circle
salary
save
share
shield
sort
sprocket
stacks
tooltip
trash
upload
user
warning-triangle
xmark-small
xmark
<x-uxlibrary.icon xs icon="home" />
<x-uxlibrary.icon sm icon="home" />
<x-uxlibrary.icon icon="home" />
<x-uxlibrary.icon lg icon="home" />
<x-uxlibrary.icon xl icon="home" />