# (Squarespace) Add a colored circle around Accordion Plus/Minus icon

**URL:** <https://community.elfsight.com/t/squarespace-add-a-colored-circle-around-accordion-plus-minus-icon/101343>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [February 15, 2025, 10:58am UTC](https://community.elfsight.com/t/squarespace-add-a-colored-circle-around-accordion-plus-minus-icon/101343 "2025-02-15T10:58:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [February 15, 2025, 10:58am UTC](https://community.elfsight.com/t/squarespace-add-a-colored-circle-around-accordion-plus-minus-icon/101343/1 "2025-02-15T10:58:19Z")

</div>

To add a colored circle around Accordion plus/minus icon, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/0/505556fd19928b7ac9c39824288a2ec75dac7c76.png)

You can use this code to Custom CSS box.  
If code doesn’t work, you can comment below, [message](https://community.elfsight.com/u/tuanphan/) or [email me](mailto:info@beaverhero.com).

```auto
div.sqs-block-accordion .accordion-icon-container {
    background-color: #f6dede;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
}
.sqs-block-accordion .accordion-icon-container>* {
    width: 50% !important;
    height: 50% !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/c/ec7915ddda75d739bf1bf05532be61669211f14b.jpeg)