# Change The Default "Three Dots" Icon With Custom CSS In List Collection

**URL:** https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872
**Category:** Community Resources
**Tags:** custom-code
**Created:** [March 20, 2025, 2:56pm UTC](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872 "2025-03-20T14:56:37Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [March 20, 2025, 2:56pm UTC](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872/1 "2025-03-20T14:56:37Z")

</div>

Hey Gliders 🛝,

I’ve found a way to change the default “three dots” icon in collections.

Guess what. It is only three steps! Or three dots 🤣

- Add the “custom-three-dots” class to your list collection.
- Add the custom CSS below.
- Change the background-image url to anything you want.

```css
/* Custom Three Dots */
.custom-three-dots button[data-testid="menu-button"]:has(svg){
width:64px;
height:64px;
}
.custom-three-dots button[data-testid="menu-button"]:has(svg) > div:has(>svg){
position: relative; 
width:64px;
height:64px;
}
 .custom-three-dots button[data-testid="menu-button"] div:has(>svg):after {
            content: '';
            position: absolute;
            width: 100%;
            height:100%;
            background-image: url('image.png');
            background-size: contain;
            background-repeat: no-repeat;
            pointer-events: none;
}
/* END: Custom Three Dots */

```

# Showcase

![chrome_1thR2Ebxw0](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e0ca746b494fcadc744c935613755cfb248196e.gif)

---

<div class="post-metadata">

### Author: ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)
#### Post date: [March 20, 2025, 3:05pm UTC](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872/2 "2025-03-20T15:05:33Z")

</div>

That’s very cool! Nicely done, @MaximeBaker !

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [March 20, 2025, 3:17pm UTC](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872/3 "2025-03-20T15:17:09Z")

</div>

Thank you very much!

---

<div class="post-metadata">

### Author: ![Aldeano\_digital](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aldeano_digital/32/74530_2.png) [@Aldeano\_digital](https://community.glideapps.com/u/Aldeano_digital)
#### Post date: [March 22, 2025, 7:44pm UTC](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872/4 "2025-03-22T19:44:36Z")

</div>

Thanks for sharing, I didn’t know I needed it until I saw how the collection changes by customizing those three dots…love it.