Icon
Icons set available in "eds-core" Package
Updated in eds-core: 1.22.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Icon } from '@adaptavant/eds-core';
Tone
Icons are available in 5 tones.
{/* neutralPrimary */}
<BookingsIcon tone="neutralPrimary" />
{/* neutralSecondary */}
<BookingsIcon tone="neutralSecondary" />
{/* neutralTertiary */}
<BookingsIcon tone="neutralTertiary" />
{/* accentPrimary */}
<BookingsIcon tone="accentPrimary" />
{/* criticalPrimary */}
<BookingsIcon tone="criticalPrimary" />Size
Icons are available in 5 sizes. 24 is the default.
{/* size: 16 */}
<BookingsIcon size="16" />
{/* size: 20 */}
<BookingsIcon size="20" />
{/* size: 24 */}
<BookingsIcon size="24" />
{/* size: 32 */}
<BookingsIcon size="32" />
{/* size: 40 */}
<BookingsIcon size="40" />Fill
Icons without a tone prop will inherit the nearest color property.
This text is purple and so are the icons.
<div className="text-purple-700 dark:text-purple-300">
<p>This text is purple and so are the icons.</p>
<div className="flex flex-wrap gap-4">
<ConnectFilledIcon />
<ConnectIcon />
</div>
</div>All Icons
For reference here is a list of all available icons:
ActivityIcon
AdaptiveUFilledIcon
AdaptiveUIcon
AddIcon
AdditionalInfoIcon
AddOnIcon
AmexIcon
AndroidIcon
AnnouncementsIcon
AppleFilledIcon
AppleIcon
ApplyAllIcon
AppointmentsRecurringIcon
ArchiveIcon
ArrowDecreaseIcon
ArrowIncreaseIcon
AttachmentIcon
BankIcon
BillingIcon
BirthdayIcon
BlockIcon
BoldIcon
BookingsFilledIcon
BookingsIcon
BreakIcon
BrokenImageIcon
BusinessCommunicationIcon
BusinessIcon
CalendarFoldIcon
CalView3DayIcon
CalViewAgendaIcon
CalViewDayIcon
CalViewMonthIcon
CalViewWeekIcon
CameraIcon
CampaignIcon
CashIcon
ChargeIcon
ChartBarFilledIcon
ChartBarIcon
ChatIcon
CheckboxCheckIcon
CheckboxIndeterminateIcon
CheckCircleFilledIcon
CheckCircleIcon
CheckIcon
CheckUserIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
CircleDashIcon
ClassBookingIcon
ClassIcon
ClipboardCopyIcon
ClockDollarIcon
ClockIcon
CompanyIcon
ConnectFilledIcon
ConnectIcon
CreateBookingIcon
CreateServiceIcon
CreateUserIcon
CreditCardIcon
CreditDataIcon
CropIcon
CustomerFilledIcon
CustomerIcon
CustomersFilledIcon
CustomersIcon
DeleteIcon
DesignIcon
DeviceDesktopIcon
DeviceMobileIcon
DollarBookingIcon
DollarClockIcon
DownloadIcon
DragDropIcon
DropdownDownIcon
DropdownUpIcon
DuplicateIcon
EditIcon
EmojiIcon
ErrorIcon
ExpandIcon
ExpiryDateIcon
ExportIcon
EyeHiddenIcon
EyeVisibleIcon
FacebookFilledIcon
FacebookIcon
FileCsvIcon
FilterIcon
FlagIcon
GeneralIcon
GlobeIcon
GoogleFilledIcon
GoTodayIcon
GrowYourBrandIcon
HearthFilledIcon
HelpIcon
HomeIcon
ImageIcon
ImportIcon
InboxFilledIcon
InboxIcon
InformationIcon
InstagramFilledIcon
InstagramIcon
IntegrationsFilledIcon
IntegrationsIcon
ItalicIcon
JustifyLeftIcon
KeypadIcon
LinkDisconnectIcon
LinkedinFilledIcon
LinkedinIcon
LinkIcon
ListCheckmarkIcon
LocationIcon
LockClosedIcon
LockOpenIcon
LogoutIcon
MailIcon
ManageAccountIcon
MapPinFilledIcon
MapPinIcon
MediaControlPauseFilledIcon
MediaControlPlayFilledIcon
MediaControlVolumeHighFilledIcon
MediaControlVolumeLowFilledIcon
MediaControlVolumeMaxFilledIcon
MediaControlVolumeOffFilledIcon
MenuIcon
MergeIcon
MessengerFilledIcon
MinimiseIcon
ModeDarkIcon
ModeLightIcon
MoneyFilledIcon
MoneyIcon
MoreIcon
NavigationIcon
NewIcon
NewWindowIcon
NotesFilledIcon
NotesIcon
NotificationsIcon
NotificationsOffIcon
OutOfOfficeIcon
PaletteIcon
PauseIcon
PaymentApplepayFilledIcon
PaymentApplepayIcon
PaymentApplepayPlainIcon
PaymentCashAppFilledIcon
PaymentCashAppIcon
PaymentCashAppPlainIcon
PaymentGooglepayFilledIcon
PaymentGooglepayIcon
PaymentGooglepayPlainIcon
PaymentHistoryIcon
PaymentMastercardFilledIcon
PaymentMastercardIcon
PaymentMastercardPlainIcon
PaymentPaypalFilledIcon
PaymentPaypalIcon
PaymentPaypalPlainIcon
PaymentVisaFilledIcon
PaymentVisaIcon
PaymentVisaPlainIcon
PhoneFilledIcon
PhoneIcon
PhoneMessageIcon
PinIcon
PlayIcon
PlaybackSpeedIcon
PluginWebsiteIcon
PreviewIcon
PrintIcon
ProfileIcon
QrCodeIcon
RadioControlIcon
ReductionIcon
RefreshIcon
ReminderIcon
RemoveIcon
ReplyIcon
ReportsFilledIcon
ReportsIcon
ReviewStarFilledIcon
ReviewStarHalfFilledIcon
ReviewStarIcon
RotateItemIcon
SearchIcon
SecuredIcon
SendFilledIcon
SendIcon
ServicesFilledIcon
ServicesIcon
SetmoreIcon
SettingsFilledIcon
SettingsIcon
ShareIcon
SidebarFilledIcon
SidebarIcon
SlotIcon
SortDownIcon
SortIcon
SortUpIcon
StatusAwayFilledIcon
StatusBusyFilledIcon
StatusOfflineFilledIcon
StorageIcon
SparklesIcon
SupportFilledIcon
SupportIcon
TapToPayCircleFilledIcon
TapToPayCircleIcon
TapToPayFilledIcon
TapToPayIcon
TargetIcon
TeamIcon
TeleportFilledIcon
TeleportIcon
TerminalIcon
TextCopyIcon
TextSizeIcon
TiktokFilledIcon
TiktokIcon
TimerIcon
TryProFilledIcon
TwitterIcon
UnderlineIcon
UpdatesFilledIcon
UpdatesIcon
UploadIcon
VideoCameraFilledIcon
VideoCameraIcon
WarningIcon
WhatsappFilledIcon
WindowsFilledIcon
XFilledIcon
YocoTimerIcon
YourAppIcon
YourBrandIcon
YoutubeFilledIcon
YoutubeIcon
const allIcons = {
ActivityIcon,
AdaptiveUFilledIcon,
AdaptiveUIcon,
AddIcon,
AdditionalInfoIcon,
AddOnIcon,
AmexIcon,
AndroidIcon,
AnnouncementsIcon,
AppleFilledIcon,
AppleIcon,
ApplyAllIcon,
AppointmentsRecurringIcon,
ArchiveIcon,
ArrowDecreaseIcon,
ArrowIncreaseIcon,
AttachmentIcon,
BankIcon,
BillingIcon,
BirthdayIcon,
BlockIcon,
BoldIcon,
BookingsFilledIcon,
BookingsIcon,
BreakIcon,
BrokenImageIcon,
BusinessCommunicationIcon,
BusinessIcon,
CalendarFoldIcon,
CalView3DayIcon,
CalViewAgendaIcon,
CalViewDayIcon,
CalViewMonthIcon,
CalViewWeekIcon,
CameraIcon,
CampaignIcon,
CashIcon,
ChargeIcon,
ChartBarFilledIcon,
ChartBarIcon,
ChatIcon,
CheckboxCheckIcon,
CheckboxIndeterminateIcon,
CheckCircleFilledIcon,
CheckCircleIcon,
CheckIcon,
CheckUserIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
CircleDashIcon,
ClassBookingIcon,
ClassIcon,
ClipboardCopyIcon,
ClockDollarIcon,
ClockIcon,
CompanyIcon,
ConnectFilledIcon,
ConnectIcon,
CreateBookingIcon,
CreateServiceIcon,
CreateUserIcon,
CreditCardIcon,
CreditDataIcon,
CropIcon,
CustomerFilledIcon,
CustomerIcon,
CustomersFilledIcon,
CustomersIcon,
DeleteIcon,
DesignIcon,
DeviceDesktopIcon,
DeviceMobileIcon,
DollarBookingIcon,
DollarClockIcon,
DownloadIcon,
DragDropIcon,
DropdownDownIcon,
DropdownUpIcon,
DuplicateIcon,
EditIcon,
EmojiIcon,
ErrorIcon,
ExpandIcon,
ExpiryDateIcon,
ExportIcon,
EyeHiddenIcon,
EyeVisibleIcon,
FacebookFilledIcon,
FacebookIcon,
FileCsvIcon,
FilterIcon,
FlagIcon,
GeneralIcon,
GlobeIcon,
GoogleFilledIcon,
GoTodayIcon,
GrowYourBrandIcon,
HearthFilledIcon,
HelpIcon,
HomeIcon,
ImageIcon,
ImportIcon,
InboxFilledIcon,
InboxIcon,
InformationIcon,
InstagramFilledIcon,
InstagramIcon,
IntegrationsFilledIcon,
IntegrationsIcon,
ItalicIcon,
JustifyLeftIcon,
KeypadIcon,
LinkDisconnectIcon,
LinkedinFilledIcon,
LinkedinIcon,
LinkIcon,
ListCheckmarkIcon,
LocationIcon,
LockClosedIcon,
LockOpenIcon,
LogoutIcon,
MailIcon,
ManageAccountIcon,
MapPinFilledIcon,
MapPinIcon,
MediaControlPauseFilledIcon,
MediaControlPlayFilledIcon,
MediaControlVolumeHighFilledIcon,
MediaControlVolumeLowFilledIcon,
MediaControlVolumeMaxFilledIcon,
MediaControlVolumeOffFilledIcon,
MenuIcon,
MergeIcon,
MessengerFilledIcon,
MinimiseIcon,
ModeDarkIcon,
ModeLightIcon,
MoneyFilledIcon,
MoneyIcon,
MoreIcon,
NavigationIcon,
NewIcon,
NewWindowIcon,
NotesFilledIcon,
NotesIcon,
NotificationsIcon,
NotificationsOffIcon,
OutOfOfficeIcon,
PaletteIcon,
PauseIcon,
PaymentApplepayFilledIcon,
PaymentApplepayIcon,
PaymentApplepayPlainIcon,
PaymentCashAppFilledIcon,
PaymentCashAppIcon,
PaymentCashAppPlainIcon,
PaymentGooglepayFilledIcon,
PaymentGooglepayIcon,
PaymentGooglepayPlainIcon,
PaymentHistoryIcon,
PaymentMastercardFilledIcon,
PaymentMastercardIcon,
PaymentMastercardPlainIcon,
PaymentPaypalFilledIcon,
PaymentPaypalIcon,
PaymentPaypalPlainIcon,
PaymentVisaFilledIcon,
PaymentVisaIcon,
PaymentVisaPlainIcon,
PhoneFilledIcon,
PhoneIcon,
PhoneMessageIcon,
PinIcon,
PlayIcon,
PlaybackSpeedIcon,
PluginWebsiteIcon,
PreviewIcon,
PrintIcon,
ProfileIcon,
QrCodeIcon,
RadioControlIcon,
ReductionIcon,
RefreshIcon,
ReminderIcon,
RemoveIcon,
ReplyIcon,
ReportsFilledIcon,
ReportsIcon,
ReviewStarFilledIcon,
ReviewStarHalfFilledIcon,
ReviewStarIcon,
RotateItemIcon,
SearchIcon,
SecuredIcon,
SendFilledIcon,
SendIcon,
ServicesFilledIcon,
ServicesIcon,
SetmoreIcon,
SettingsFilledIcon,
SettingsIcon,
ShareIcon,
SidebarFilledIcon,
SidebarIcon,
SlotIcon,
SortDownIcon,
SortIcon,
SortUpIcon,
StatusAwayFilledIcon,
StatusBusyFilledIcon,
StatusOfflineFilledIcon,
StorageIcon,
SparklesIcon,
SupportFilledIcon,
SupportIcon,
TapToPayCircleFilledIcon,
TapToPayCircleIcon,
TapToPayFilledIcon,
TapToPayIcon,
TargetIcon,
TeamIcon,
TeleportFilledIcon,
TeleportIcon,
TerminalIcon,
TextCopyIcon,
TextSizeIcon,
TiktokFilledIcon,
TiktokIcon,
TimerIcon,
TryProFilledIcon,
TwitterIcon,
UnderlineIcon,
UpdatesFilledIcon,
UpdatesIcon,
UploadIcon,
VideoCameraFilledIcon,
VideoCameraIcon,
WarningIcon,
WhatsappFilledIcon,
WindowsFilledIcon,
XFilledIcon,
YocoTimerIcon,
YourAppIcon,
YourBrandIcon,
YoutubeFilledIcon,
YoutubeIcon,
};
return (
<div className="grid grid-cols-3 gap-4">
{Object.entries(allIcons).map(([key, Icon]) => (
<div
className="flex flex-col items-start gap-4 rounded border p-4 dark:border-gray-600"
key={key}
>
<Heading as="h2" typography="heading.5">
{key}
</Heading>
<Icon tone="accentPrimary" />
</div>
))}
</div>
);Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Usage guidelines
Do
- Symbolic communication: Use icons for symbolic representation in elements where there is limited space for text, such as indicating the number of slides in a carousel. Choose universally recognizable icons for international clarity.
- Conveying critical meaning: Employ icons to convey essential meanings that may not be effectively communicated through words, for example, using a downward chevron in a button to signify it reveals a menu.
- Enhancing design hierarchy: Integrate icons to aid in quick scanning, adding rhythm and hierarchy to the design for improved visual organization.
Don’t
- Decorative purposes: Avoid using icons solely for decorative or ornamental purposes, similar to how illustrations are typically utilized. If decorative elements are required, contact us for suitable alternatives.
- Mere visual reinforcement: Refrain from using icons merely as visual reinforcements for associated text without introducing new meaning or information.
- Communication of status or health: Do not use icons to communicate status or health; instead, opt for dedicated status indicators.
- Interactive elements: Avoid using icons as interactive elements (e.g., hover, focus, click/tap). In such cases, prefer using IconButton for appropriate functionality.
Best practices
Do
Employ icons purposefully, selecting those that are easily recognizable and contextually meaningful.
Don’t
Utilize icons for their intended meanings to enhance comprehension and clarity.
Do
Enhance clarity by pairing text and icons whenever feasible.
Don’t
Avoid creating interactive icons. Instead, utilize IconButton for this purpose.