Feedback & indicators
Icon
Use icons to help users more easily understand common interaction patterns that are available.
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 /* …and 274 more */ } from '@balance-web/icon';Loading demo…
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 '@balance-web/icon/icons/ICON_NAME';When you need multiple icons, import from multiple entry points:
import { ChevronRightIcon } from '@balance-web/icon/icons/ChevronRightIcon';
import { XIcon } from '@balance-web/icon/icons/XIcon';Usage
Color
By default icons will inherit the current color of the container they are in. You may also pass an explicit theme color.
Loading demo…
Size
Icons are available in four sizes, medium is the default.
Loading demo…
Icon Finder
Search the available icons exposed from the web design system.
Loading demo…