Use gluestack-ui Icon component to enhance your web and mobile app with scalable component icons. A must-have React Native icon library for modern development!This is an illustration of Icon component.
size
Installation
Run the following command:
npx gluestack-ui add icon
API Reference
To use this component in your project, include the following import statement in your file.
import { Icon } from '@/components/ui/icon';
export default () => <Icon as={} />;
Component Props
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Icon
Pre built icons provided by gluestack-ui inherits all the properties of React Native SVG's
html element on web.The Icon components inherits all the properties that third party library provides and can be directly applied as props.
Features
support of props on any svg icon
Accessibility
We have outlined the various features that ensure the Icon component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Role: img is passed
Prop
Type
Default
Description
size
2xs | xs | sm | md | lg | xl
md
The size of the icon.
Examples
The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
All Gluestack Icons
Below is a list of all of the icons in the library.
is an open source icon library for displaying icons for react-native.
gluestack-ui
provides an easy integration with lucide icons.
SVG & Custom Icons
We can directly create Icon using
createIcon
function exported from
@/components/ui/icon
and use it by passing it in
as
prop in
Icon
component.CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.Notes to remember while using createIcon function
Pass svg props such as
viewBox
in
createIcon
directly.
Copy the svg code without the SVG tag directly into the function argument
Path
or
D
or whichever prop justifies your svg.
Replace HTML SVG tags (e.g.,
<path>
,
<rect>
etc) with the corresponding React Native SVG components (e.g.,
<Path>
,
<Rect>
etc) for native.
For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode or className.