Usage
Styling and changing the Icon Appearance
Here are some possibilities and tips for customizing icons. But there are so many options that they wouldn't all fit here.
If it's available in Tailwind, you can try it with rocketicons
Loading...
Defining background
Use the Tailwind utilities to set the icons background.
<div><RcRocketIconclassName="bg-white ..." /><RcRocketIconclassName="bg-red-200 ..." /><RcRocketIconclassName="bg-orange-200 ..." /><RcRocketIconclassName="bg-lime-200 ..." /></div>Define border
Every border utility should work with no problems on rocketicons.
Border Radius You can define the border radius.
<div><RcRocketIconclassName="border border-slate-600 ..." /><RcRocketIconclassName="rounded border border-slate-600 ..." /><RcRocketIconclassName="rounded-md border border-slate-600 ..." /><RcRocketIconclassName="rounded-lg border border-slate-600 ..." /></div>Border
Border width
You can define the border width.
<div><RcRocketIconclassName="border-2 border-slate-600 ..." /><RcRocketIconclassName="border-4 border-slate-600 ..." /><RcRocketIconclassName="border-8 border-slate-600 ..." /></div>Borders
Border Style
You can define the border style.
<div><RcRocketIconclassName="border-solid border-slate-600 ..." /><RcRocketIconclassName="border-dashed border-slate-600 ..." /><RcRocketIconclassName="border-dotted border-slate-600 ..." /><RcRocketIconclassName="border-double border-slate-600 ..." /></div>Outline
Define outline. Take a look on every outline available option.
<div><RcRocketIconclassName="outline outline-offset-2 outline-1 ..." /><RcRocketIconclassName="outline outline-offset-2 outline-2 ..." /><RcRocketIconclassName="outline outline-offset-2 outline-4 ..." /></div>Ring
Define ring. Take a look on every ring.
<div><RcRocketIconclassName="ring-offset-2 ring ..." /><RcRocketIconclassName="ring-offset-2 ring-2 ..." /><RcRocketIconclassName="ring-offset-2 ring-4 ..." /></div>Effects
Effects like shadow, opacity e mix bend can be applied.
<div><RcRocketIconclassName="shadow-md ..." /><RcRocketIconclassName="shadow-lg ..." /><RcRocketIconclassName="shadow-xl ..." /><RcRocketIconclassName="shadow-2xl ..." /></div>Animations
Animations and transitions can be used with icons, but this functionality is only available for React.
React Native has some limited features. See the official documentation of NativeWind for more information.
<div><RcRocketIconclassName="animate-bounce ..." /><RcRocketIconclassName="animate-ping ..." /><RcRocketIconclassName="animate-pulse ..." /><RcRocketIconclassName="animate-spin ..." /></div>Usage
Styling and changing the Icon Appearance
Here are some possibilities and tips for customizing icons. But there are so many options that they wouldn't all fit here.
If it's available in Tailwind, you can try it with rocketicons
<div><RcRocketIconclassName="scale-50 ..." /><RcRocketIconclassName="rotate-45 ..." /><RcRocketIconclassName="skew-y-12 ..." /></div>Cursor
Use cursor on icons.
Hover over the icon and see changes
<div><RcRocketIconclassName="cursor-pointer ..." /><RcRocketIconclassName="cursor-move ..." /><RcRocketIconclassName="cursor-wait ..." /><RcRocketIconclassName="cursor-grab ..." /></div>Filters
Filters and icons.
NativeWind doesn't support filters, therefore this functionality isn't available for React Native."
<div><RcRocketIconclassName="blur ..." /><RcRocketIconclassName="brightness-50 ..." /><RcRocketIconclassName="drop-shadow-lg ..." /><RcRocketIconclassName="saturate-200 ..." /></div>