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

Arrow UpArrow UpArrow DownArrow DownArrow LeftArrow RightArrow LeftArrow Right

Available icons

Alert
Alert
import Alert from 'baseui/icon/alert'
Arrow Down
ArrowDown
import ArrowDown from 'baseui/icon/arrow-down'
Arrow Left
ArrowLeft
import ArrowLeft from 'baseui/icon/arrow-left'
Arrow Right
ArrowRight
import ArrowRight from 'baseui/icon/arrow-right'
Arrow Up
ArrowUp
import ArrowUp from 'baseui/icon/arrow-up'
Check Indeterminate
CheckIndeterminate
import CheckIndeterminate from 'baseui/icon/check-indeterminate'
Check
Check
import Check from 'baseui/icon/check'
Chevron Left
ChevronLeft
import ChevronLeft from 'baseui/icon/chevron-left'
Chevron Right
ChevronRight
import ChevronRight from 'baseui/icon/chevron-right'
Delete Alt
DeleteAlt
import DeleteAlt from 'baseui/icon/delete-alt'
Delete
Delete
import Delete from 'baseui/icon/delete'
Filter
Filter
import Filter from 'baseui/icon/filter'
Grab
Grab
import Grab from 'baseui/icon/grab'
Menu
Menu
import Menu from 'baseui/icon/menu'
Overflow
Overflow
import Overflow from 'baseui/icon/overflow'
Plus
Plus
import Plus from 'baseui/icon/plus'
Search
Search
import Search from 'baseui/icon/search'
Spinner
Spinner
import Spinner from 'baseui/icon/spinner'
Triangle Down
TriangleDown
import TriangleDown from 'baseui/icon/triangle-down'
Triangle Left
TriangleLeft
import TriangleLeft from 'baseui/icon/triangle-left'
Triangle Right
TriangleRight
import TriangleRight from 'baseui/icon/triangle-right'
Triangle Up
TriangleUp
import TriangleUp from 'baseui/icon/triangle-up'
Upload
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:

Arrow Right

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

Icon API

children Node

Node

size union

Size of element, will be passed to the svg width/height style. Can also be a value included in

One of
number,
string

color 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>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*