# Is there a way to tie the color of an icon in a button to the buttons hover state?

**URL:** <https://community.weweb.io/t/is-there-a-way-to-tie-the-color-of-an-icon-in-a-button-to-the-buttons-hover-state/6755>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [February 1, 2024, 10:01pm UTC](https://community.weweb.io/t/is-there-a-way-to-tie-the-color-of-an-icon-in-a-button-to-the-buttons-hover-state/6755 "2024-02-01T22:01:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aldencarinahealth](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aldencarinahealth](https://community.weweb.io/u/aldencarinahealth)\
**Post date:** [February 1, 2024, 10:01pm UTC](https://community.weweb.io/t/is-there-a-way-to-tie-the-color-of-an-icon-in-a-button-to-the-buttons-hover-state/6755/1 "2024-02-01T22:01:04Z")

</div>

It works for the text of the button, but not the icon So when I hover over the button, the text changes but the icon doesnt. If I add a hover state to the icon, it only applies when the cursor is over the icon

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ee59ca712276c48e3ae43427448d75ce0073f834.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [February 1, 2024, 10:24pm UTC](https://community.weweb.io/t/is-there-a-way-to-tie-the-color-of-an-icon-in-a-button-to-the-buttons-hover-state/6755/2 "2024-02-01T22:24:36Z")

</div>

Hi @aldencarinahealth 👋

On the button, select the `Hover` state and make sure `Apply to children` is on:

 ![CleanShot 2024-02-01 at 23.20.40@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c9684a550d3238df54826803f2709d160d8d2370.png)

Then on the icon inside the button, select the `Button: Hover` state:

![CleanShot 2024-02-01 at 23.22.20](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f99a505ecd37fcb57b8a537a361548914d0a0b1b.gif)

Does that help?

To learn more about states, check out [this academy video](https://academy.weweb.io/scale-your-web-app/custom-states/) and [this user doc article](https://docs.weweb.io/css-and-styling/states.html).

---

<div class="post-metadata">

**Author:** ![aldencarinahealth](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aldencarinahealth](https://community.weweb.io/u/aldencarinahealth)\
**Post date:** [February 1, 2024, 10:38pm UTC](https://community.weweb.io/t/is-there-a-way-to-tie-the-color-of-an-icon-in-a-button-to-the-buttons-hover-state/6755/3 "2024-02-01T22:38:08Z")

</div>

Ah there it is, thanks!