Icon

Use Icon to render an SVG symbol that conveys meaning or reinforces an action. The source prop accepts three kinds of value: a built-in icon name, your own SVG component, or a same-domain URL to an SVG file. External URLs are rejected for security.

Import

import { Icon } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
source	IconType | FunctionComponent | string	No	The icon to render: a built-in icon name, an SVG component, or a same-domain SVG URL.
size	'12' | '16' | '24' | '32' | '64' | '80'	No	Icon size in pixels. Defaults to 24.
stroke	'1' | '2' | '3' | '4'	No	Stroke width. Applies only to stroke-based icons. Defaults to 2.
title	string	No	Accessible title announced by screen readers.

Icon also accepts standard SVG attributes (for example, className), except size.

Example

import { Icon, Button, provider } from '@dropins/tools/components.js';
import { h } from '@dropins/tools/preact.js';

// Pass a built-in icon into another component's `icon` prop
await provider.render(Button, {
  children: 'Search',
  icon: h(Icon, { source: 'Search' }),
})(document.querySelector('.search'));

// Render an icon on its own, at a larger size
await provider.render(Icon, { source: 'Cart', size: '32' })(document.querySelector('.cart-icon'));

// Load a same-domain SVG by URL; external URLs are rejected for security
await provider.render(Icon, {
  source: `${window.location.origin}/icons/custom.svg`,
  title: 'Custom',
})(document.querySelector('.custom-icon'));

Built-in icons

Pass any of these names as a string to source (for example, source: 'Cart'):

• Add
• AddressBook
• Bulk
• Burger
• Business
• Card
• Cart
• Check
• CheckWithCircle
• ChevronDown
• ChevronRight
• ChevronUp
• Close
• Coupon
• Date
• Delivery
• Edit
• EmptyBox
• Eye
• EyeClose
• Gift
• GiftCard
• Heart
• HeartFilled
• InfoFilled
• List
• Locker
• Minus
• Order
• OrderError
• OrderSuccess
• PaymentError
• Placeholder
• PlaceholderFilled
• Purchase
• Quote
• Search
• SearchFilled
• Sort
• Star
• Structure
• Team
• Trash
• User
• View
• Wallet
• Warning
• WarningFilled
• WarningWithCircle

Related

• Button — commonly takes an Icon as its icon prop.
• Design tokens — the sizing and color scales icons use.