- Save screen real-estate in a tight user interface.
- Guide users to where they need to go.
Examples
Icon basic usage
Available icons
Alert
import Alert from 'baseui/icon/alert'
ArrowDown
import ArrowDown from 'baseui/icon/arrow-down'
ArrowLeft
import ArrowLeft from 'baseui/icon/arrow-left'
ArrowRight
import ArrowRight from 'baseui/icon/arrow-right'
ArrowUp
import ArrowUp from 'baseui/icon/arrow-up'
CheckIndeterminate
import CheckIndeterminate from 'baseui/icon/check-indeterminate'
Check
import Check from 'baseui/icon/check'
ChevronLeft
import ChevronLeft from 'baseui/icon/chevron-left'
ChevronRight
import ChevronRight from 'baseui/icon/chevron-right'
DeleteAlt
import DeleteAlt from 'baseui/icon/delete-alt'
Delete
import Delete from 'baseui/icon/delete'
Filter
import Filter from 'baseui/icon/filter'
Grab
import Grab from 'baseui/icon/grab'
Menu
import Menu from 'baseui/icon/menu'
Overflow
import Overflow from 'baseui/icon/overflow'
Plus
import Plus from 'baseui/icon/plus'
Search
import Search from 'baseui/icon/search'
Spinner
import Spinner from 'baseui/icon/spinner'
TriangleDown
import TriangleDown from 'baseui/icon/triangle-down'
TriangleLeft
import TriangleLeft from 'baseui/icon/triangle-left'
TriangleRight
import TriangleRight from 'baseui/icon/triangle-right'
TriangleUp
import TriangleUp from 'baseui/icon/triangle-up'
Upload
import Upload from 'baseui/icon/upload'
Icon in a button
Overrides
Additionally, you can fully customize any part of the Icon through the overrides prop. The Icon consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector: