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="icon-rose-500" />
</div>

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>

Stroke Width

The outlined icons can have their line width customized using the stroke width Tailwind's utilities.

<div>
<RcRocketIconclassName="stroke-[0.2] ..." />
<RcRocketIconclassName="stroke-[0.5] ..." />
<RcRocketIconclassName="stroke-1 ..." />
<RcRocketIconclassName="stroke-[1.5] ..." />
<RcRocketIconclassName="stroke-2 ..." />
<RcRocketIconclassName="stroke-[3px] ..." />
</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. Custom animations can be created, learn how on Tailwind documentation.

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>