Icon
Visually indicate an action or option.
If you are an Uber employee, you can access the full list of icons here.
When to use
- Save screen real-estate in a tight user interface.
- Guide users to where they need to go.
Examples
Available icons
Overrides
Additionally, you can fully customize any part of the Icon through the overrides prop. The Icon consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:
Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!
API
Icon API
children Node
Nodesize union
Size of element, will be passed to the svg width/height style. Can also be a value included in
One of number, stringcolor string
Color of icon, will be used as svg fill
title string
Allows you to set the SVG <title> label, which is used for accessibility
overrides object
Svg { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$size One of number, string$color stringIcon exports
You can import this module like so:
import {Icon} from 'baseui/icon'
It exports the following components or utility functions:
- Icon
- StyledSvg
- Alert
- ArrowDown
- ArrowLeft
- ArrowRight
- ArrowUp
- CheckIndeterminate
- Check
- ChevronDown
- ChevronLeft
- ChevronRight
- ChevronUp
- DeleteAlt
- Delete
- Filter
- Grab
- Hide
- Menu
- Overflow
- Plus
- Search
- Show
- Spinner
- TriangleDown
- TriangleLeft
- TriangleRight
- TriangleUp
- Upload