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.
Icon basic usage
import Alert from 'baseui/icon/alert'
import ArrowDown from 'baseui/icon/arrow-down'
import ArrowLeft from 'baseui/icon/arrow-left'
import ArrowRight from 'baseui/icon/arrow-right'
import ArrowUp from 'baseui/icon/arrow-up'
import CheckIndeterminate from 'baseui/icon/check-indeterminate'
import Check from 'baseui/icon/check'
import ChevronDown from 'baseui/icon/chevron-down'
import ChevronLeft from 'baseui/icon/chevron-left'
import ChevronRight from 'baseui/icon/chevron-right'
import ChevronUp from 'baseui/icon/chevron-up'
import DeleteAlt from 'baseui/icon/delete-alt'
import Delete from 'baseui/icon/delete'
import Filter from 'baseui/icon/filter'
import Grab from 'baseui/icon/grab'
import Hide from 'baseui/icon/hide'
import Menu from 'baseui/icon/menu'
import Overflow from 'baseui/icon/overflow'
import Plus from 'baseui/icon/plus'
import Search from 'baseui/icon/search'
import Show from 'baseui/icon/show'
import Spinner from 'baseui/icon/spinner'
import TriangleDown from 'baseui/icon/triangle-down'
import TriangleLeft from 'baseui/icon/triangle-left'
import TriangleRight from 'baseui/icon/triangle-right'
import TriangleUp from 'baseui/icon/triangle-up'
import Upload from 'baseui/icon/upload'
Icon in a button
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!
Size of element, will be passed to the svg width/height style. Can also be a value included in
Color of icon, will be used as svg fill
Allows you to set the SVG <title> label, which is used for accessibility