Balance Logo
Balance
Reckon Design System

Icon

Icons are used to visually communicate core parts of the app and available actions.
Install
pnpm add @reckon-web/icon
Import usage
import {
AlertOctagonIcon,
ActivityIcon,
AlertCircleIcon,
AlertTriangleIcon,
AlignCenterIcon,
AlignLeftIcon,
AlignJustifyIcon,
ApertureIcon,
AlignRightIcon,
AnchorIcon,
ArrowDownCircleIcon,
ArrowDownLeftIcon,
ArrowDownIcon,
ArrowLeftCircleIcon,
ArrowRightCircleIcon,
ArrowDownRightIcon,
ArchiveIcon,
ArrowLeftIcon,
ArrowUpLeftIcon,
ArrowRightIcon,
ArrowUpRightIcon,
ArrowUpIcon,
ArrowUpCircleIcon,
AtSignIcon,
AwardIcon,
BatteryIcon,
BatteryChargingIcon,
BarChartIcon,
...
} from '@reckon-web/icon';
  • Code
  • API

Imports

Each icon is exposed from its own entry point to reduce the bundle size and improve performance. Icon entry points follow the pattern:

import { ICON_NAME } from '@reckon-web/icon/icons/ICON_NAME';

When you need multiple icons, import from multiple entry points:

import { ChevronRightIcon } from '@reckon-web/icon/icons/ChevronRightIcon';
import { XIcon } from '@reckon-web/icon/icons/XIcon';

Usage

Use icons to help users more easily understand common interaction patterns that are available.

Color

By default icons will inherit the current color of the container they are in. You may also pass an explicit theme color.

Open in Playroom

Size

Icons are available in three sizes, medium is the default.

Icon Finder

Search the available icons exposed from the web design system.

ActivityIcon
AirplayIcon
AlertCircleIcon
AlertOctagonIcon
AlertTriangleIcon
AlignCenterIcon
AlignJustifyIcon
AlignLeftIcon
AlignRightIcon
AnchorIcon
ApertureIcon
ArchiveIcon
ArrowDownCircleIcon
ArrowDownIcon
ArrowDownLeftIcon
ArrowDownRightIcon
ArrowLeftCircleIcon
ArrowLeftIcon
ArrowRightCircleIcon
ArrowRightIcon
ArrowUpCircleIcon
ArrowUpIcon
ArrowUpLeftIcon
ArrowUpRightIcon
AtSignIcon
AwardIcon
BarChart2Icon
BarChartIcon
BatteryChargingIcon
BatteryIcon
BellIcon
BellOffIcon
BluetoothIcon
BoldIcon
BookIcon
BookOpenIcon
BookmarkIcon
BoxIcon
BriefcaseIcon
CalendarIcon
CameraIcon
CameraOffIcon
CastIcon
CheckCircleIcon
CheckIcon
CheckSquareIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
ChevronsDownIcon
ChevronsLeftIcon
ChevronsRightIcon
ChevronsUpIcon
ChromeIcon
CircleIcon
ClipboardIcon
ClockIcon
CloudDrizzleIcon
CloudIcon
CloudLightningIcon
CloudOffIcon
CloudRainIcon
CloudSnowIcon
CodeIcon
CodepenIcon
CodesandboxIcon
CoffeeIcon
ColumnsIcon
CommandIcon
CompassIcon
CopyIcon
CornerDownLeftIcon
CornerDownRightIcon
CornerLeftDownIcon
CornerLeftUpIcon
CornerRightDownIcon
CornerRightUpIcon
CornerUpLeftIcon
CornerUpRightIcon
CpuIcon
CreditCardIcon
CropIcon
CrosshairIcon
DatabaseIcon
DeleteIcon
DiscIcon
DivideCircleIcon
DivideIcon
DivideSquareIcon
DollarSignIcon
DownloadCloudIcon
DownloadIcon
DribbbleIcon
DropletIcon
Edit2Icon
Edit3Icon
EditIcon
ExternalLinkIcon
EyeIcon
EyeOffIcon
FacebookIcon
FastForwardIcon
FeatherIcon
FigmaIcon
FileIcon
FileMinusIcon
FilePlusIcon
FileTextIcon
FilmIcon
FilterIcon
FlagIcon
FolderIcon
FolderMinusIcon
FolderPlusIcon
FramerIcon
FrownIcon
GiftIcon
GitBranchIcon
GitCommitIcon
GitMergeIcon
GitPullRequestIcon
GithubIcon
GitlabIcon
GlobeIcon
GridIcon
HardDriveIcon
HashIcon
HeadphonesIcon
HeartIcon
HelpCircleIcon
HexagonIcon
HomeIcon
ImageIcon
InboxIcon
InfoIcon
InstagramIcon
ItalicIcon
KeyIcon
LayersIcon
LayoutIcon
LifeBuoyIcon
Link2Icon
LinkIcon
LinkedinIcon
ListIcon
LoaderIcon
LockIcon
LogInIcon
LogOutIcon
MailIcon
MapIcon
MapPinIcon
Maximize2Icon
MaximizeIcon
MehIcon
MenuIcon
MessageCircleIcon
MessageSquareIcon
MicIcon
MicOffIcon
Minimize2Icon
MinimizeIcon
MinusCircleIcon
MinusIcon
MinusSquareIcon
MonitorIcon
MoonIcon
MoreHorizontalIcon
MoreVerticalIcon
MousePointerIcon
MoveIcon
MusicIcon
Navigation2Icon
NavigationIcon
OctagonIcon
PackageIcon
PaperclipIcon
PauseCircleIcon
PauseIcon
PenToolIcon
PercentIcon
PhoneCallIcon
PhoneForwardedIcon
PhoneIcon
PhoneIncomingIcon
PhoneMissedIcon
PhoneOffIcon
PhoneOutgoingIcon
PieChartIcon
PlayCircleIcon
PlayIcon
PlusCircleIcon
PlusIcon
PlusSquareIcon
PocketIcon
PowerIcon
PrinterIcon
RadioIcon
RefreshCcwIcon
RefreshCwIcon
RepeatIcon
RewindIcon
RotateCcwIcon
RotateCwIcon
RssIcon
SaveIcon
ScissorsIcon
SearchIcon
SendIcon
ServerIcon
SettingsIcon
Share2Icon
ShareIcon
ShieldIcon
ShieldOffIcon
ShoppingBagIcon
ShoppingCartIcon
ShuffleIcon
SidebarIcon
SkipBackIcon
SkipForwardIcon
SlackIcon
SlashIcon
SlidersIcon
SmartphoneIcon
SmileIcon
SpeakerIcon
SquareIcon
StarIcon
StopCircleIcon
SunIcon
SunriseIcon
SunsetIcon
TabletIcon
TagIcon
TargetIcon
TerminalIcon
ThermometerIcon
ThumbsDownIcon
ThumbsUpIcon
ToggleLeftIcon
ToggleRightIcon
ToolIcon
Trash2Icon
TrashIcon
TrelloIcon
TrendingDownIcon
TrendingUpIcon
TriangleIcon
TruckIcon
TvIcon
TwitchIcon
TwitterIcon
TypeIcon
UmbrellaIcon
UnderlineIcon
UnlockIcon
UploadCloudIcon
UploadIcon
UserCheckIcon
UserIcon
UserMinusIcon
UserPlusIcon
UserXIcon
UsersIcon
VideoIcon
VideoOffIcon
VoicemailIcon
Volume1Icon
Volume2Icon
VolumeIcon
VolumeXIcon
WatchIcon
WifiIcon
WifiOffIcon
WindIcon
XCircleIcon
XIcon
XOctagonIcon
XSquareIcon
YoutubeIcon
ZapIcon
ZapOffIcon
ZoomInIcon
ZoomOutIcon
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.