Glowup
FOUNDATIONS · 09 / 89
Icon
Icon — a Material You foundations component for React Native and web.
󱀫
packages/ui/src/components/Icon.tsx
Live demo
󰄀
Properties
3 controls
Source (glyph)
Size
Flip for RTL
Usage
Icon.tsx
<Icon source="camera" />
Variants
The states and shapes this component is meant to be used in.
Glyphs
󰄀
camera
󰂜
bell-outline
󰢻
cog-outline
󰋕
heart-outline
󰟙
map-marker-outline
Sizes
󰯠
16px
󰯠
20px
󰯠
24px
󰯠
32px
󰯠
48px
Custom sources
The point of the primitive: the source does not have to be a glyph name. A render function gets the resolved size and colour and can draw anything.
A render function receives the resolved size and colour
SVG source, themed colour
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
6 on IconProps
source
required
IconSource
color
string
flipForRTL
boolean
default: false
Mirror the glyph when the layout direction is RTL (arrows, chevrons).
size
number
default: 24
style
StyleProp<ImageStyle>
testID
string
󰅁
Previous
CardActions
Next
TouchableRipple
󰅂