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.

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'

ChevronDown

import ChevronDown from 'baseui/icon/chevron-down'

ChevronLeft

import ChevronLeft from 'baseui/icon/chevron-left'

ChevronRight

import ChevronRight from 'baseui/icon/chevron-right'

ChevronUp

import ChevronUp from 'baseui/icon/chevron-up'

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'

import Menu from 'baseui/icon/menu'

Overflow

import Overflow from 'baseui/icon/overflow'

Plus

import Plus from 'baseui/icon/plus'

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 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:

Svg

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Icon API

`Warning` `any` `= "Prop types are not shown in dev mode"`

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>