Icons
Royalty-free SVG icon set with configurable size, color, and accessibility props.
111 icons across 14 categories
Sizes
All icons support five sizes via the size prop: xs, sm, md, lg, xl.
xs
sm
md
lg
xl
Styling
Icons inherit currentColor for stroke color. Use Tailwind text color utilities via className.
Informational
InfoIcon
CheckCircleIcon
AlertTriangleIcon
AlertCircleIcon
HelpCircleIcon
XCircleIcon
Actions
XIcon
CheckIcon
MinusIcon
PlusIcon
SearchIcon
EyeIcon
EyeOffIcon
CopyIcon
TrashIcon
EditIcon
DownloadIcon
UploadIcon
RefreshCwIcon
ShareIcon
SaveIcon
LogInIcon
LogOutIcon
Navigation
ChevronLeftIcon
ChevronRightIcon
ChevronDownIcon
ChevronUpIcon
ChevronsLeftIcon
ChevronsRightIcon
ArrowLeftIcon
ArrowRightIcon
ArrowUpIcon
ArrowDownIcon
RotateCwIcon
RotateCcwIcon
Theme
SunIcon
MoonIcon
MonitorIcon
Media
PlayIcon
PauseIcon
StopIcon
MicIcon
MicOffIcon
Volume2Icon
VolumeXIcon
ImageIcon
CameraIcon
Communication
PhoneIcon
MessageCircleIcon
SendIcon
BellIcon
BellOffIcon
MailIcon
Objects
HomeIcon
CalendarIcon
ClockIcon
StarIcon
HeartIcon
BookmarkIcon
FilterIcon
LockIcon
UnlockIcon
GlobeIcon
LinkIcon
MapPinIcon
TagIcon
ClipboardIcon
ShieldIcon
FlagIcon
AwardIcon
Development
CodeIcon
TerminalIcon
FileIcon
FileTextIcon
FolderIcon
DatabaseIcon
GitBranchIcon
ZapIcon
People
UserIcon
UsersIcon
UserPlusIcon
UserMinusIcon
Layout
GridIcon
ListIcon
LayoutIcon
MaximizeIcon
MinimizeIcon
SlidersIcon
ColumnsIcon
MenuIcon
Shapes
CircleIcon
SquareIcon
ContrastIcon
LayersIcon
Commerce
ShoppingCartIcon
CreditCardIcon
PackageIcon
Social
ThumbsUpIcon
ThumbsDownIcon
SmileIcon
FrownIcon
Misc
LoaderIcon
ExternalLinkIcon
SettingsIcon
HashIcon
AtSignIcon
PaperclipIcon
WifiIcon
MoreHorizontalIcon
MoreVerticalIcon
PrintIcon
Usage
All icons are royalty-free SVG React components based on the Lucide icon set (MIT license). They render stroke-based SVGs at a 24×24 viewBox with configurable size, accessibility label, and className props.
Icon Usage
import { HeartIcon, StarIcon } from "@lukeocodes/composite-voice-ui";
// Basic usage<HeartIcon size="md" />
// With color<StarIcon size="lg" className="text-warning-500" />
// Accessible (adds role="img" + aria-label)<HeartIcon size="md" label="Favorite" />