• Docs
  • Getting Started
  • Icons
Switch theme
GitHub
  • Getting Started
    • Installation
    • Configuration
    • Customization
    • Contributing
  • Using The Icons
    • Adding Icons
    • Colors
    • Dark Mode
    • Responsive Design
    • Sizing Icons
    • Hover, Focus and Other States
    • Styling
  • Icons
    • rocketicons
    • Ant Design Icons
    • BoxIcons
    • Bootstrap Icons
    • css.gg
    • Circum Icons
    • Devicons
    • Font Awesome 5
    • Font Awesome 6
    • Flat Color Icons
    • Feather
    • Game Icons
    • Github Octicons icons
    • Grommet-Icons
    • Heroicons
    • Heroicons 2
    • IcoMoon Free
    • Ionicons 4
    • Ionicons 5
    • Icons8 Line Awesome
    • Lucide
    • Material Design icons
    • Phosphor Icons
    • Remix Icon
    • Radix Icons
    • Simple Icons
    • Simple Line Icons
    • Tabler Icons
    • Themify Icons
    • Typicons
    • VS Code Icons
    • Weather Icons
  • Roadmap

Usage

Handling Hover, Focus and Other States

How style icons on hover, focus, and more.


The state support on React Native is not complete. Learn more at the NativeWind documentation.


The modifiers can be applied conditionally by adding them to the beginning of the class name that describes the condition you want to target. For example, to apply the border-slate-600 on hover, use hover:border-slate-600:

Hover over the icon and see changes

<div>
<RcRocketIcon
className="size-32 border border-transparent rounded-xl hover:border-slate-600"
/>
</div>

First, last, odd, and even

Using selectors


Not available for React Native. Learn more on the NativeWind official documentation.


Style an icon when it is the first-child or last-child using the first and last modifiers:

<div>
<RcRocketIcon
className="first:bg-white last:border-slate-600 ..."
/>
<RcRocketIcon
className="first:bg-white last:border-slate-600 ..."
/>
<RcRocketIcon
className="first:bg-white last:border-slate-600 ..."
/>
<RcRocketIcon
className="first:bg-white last:border-slate-600 ..."
/>
</div>

You can also style an icon when it’s an odd or even child using the odd and even modifiers:

<div>
<RcRocketIcon
className="even:bg-white odd:border-slate-600 ..."
/>
<RcRocketIcon
className="even:bg-white odd:border-slate-600 ..."
/>
<RcRocketIcon
className="even:bg-white odd:border-slate-600 ..."
/>
<RcRocketIcon
className="even:bg-white odd:border-slate-600 ..."
/>
</div>

Styling Based on Parent State

Here you find an example using conditional styling based on the state of the parent element

Hover over the icon and see changes

<div>
<button
className="group/sample ..."
>
<div
className="flex"
>
<RcRocketIcon
className="icon-sky-500 group-hover/sample:icon-white"
/>
<span
className="dark:text-slate-900 font-quicksand group-hover/sample:text-white"
>
<span>
rocket
</span>
<span
className="font-semibold"
>
icons
</span>
</span>
</div>
<p
className="text-slate-500 group-hover/sample:text-white text-sm"
>
Group state can be used to change style of the icon.
</p>
</button>
</div>

Styling Based on Sibilings State

Here you find an example using conditional styling based on the state of sibling elements.

User permission
<div>
<fieldset>
<legend>
User permission
</legend>
<input
id="admin"
className="peer/admin"
type="radio"
name="permission"
/>
<TbCheckbox
className="transition ... peer-hover/admin:opacity-100 peer-checked/admin:opacity-90 peer-checked/admin:icon-sky-500"
/>
<label
htmlFor="admin"
className="ml-2 peer-checked/admin:text-sky-500"
>
Admin
</label>
<input
id="user"
className="peer/user"
type="radio"
name="permission"
/>
<TbCheckbox
className="transition ... peer-hover/user:opacity-100 peer-checked/user:opacity-90 peer-checked/user:icon-sky-500"
/>
<label
htmlFor="user"
className="ml-2 peer-checked/user:text-sky-500"
>
User
</label>
<TbUserQuestion
className="transition opacity-100 ... peer-checked/admin:opacity-0 peer-checked/user:opacity-0"
/>
<TbUserStar
className="transition opacity-0 ... peer-checked/admin:opacity-100"
/>
<TbUser
className="transition opacity-0 ... peer-checked/user:opacity-100"
/>
</fieldset>
</div>

Copyright © 2024 rocketclimb

DiscordGitHub