# How to add badge icons

To add one of the standard icons before a badge, use the following format by adding a **icon name** separated by a colon (`:`):

**Available Icons:**

* award
* bag-check
* balloon-heart-fill
* bell
* bookmark-heart
* bookmark-star
* box2-heart
* boxes
* chat-heart-fill
* check-all
* check-circle
* check-lg
* check-square-fill
* circle-fill
* coin
* controller
* earbuds
* emoji-frown
* emoji-sunglasses
* fire
* gem
* hand-thumbs-down
* hand-thumbs-up
* headphones
* heart
* house-check
* lightning-charge-fill
* music-note-beamed
* patch-check
* patch-exclamation
* rocket-takeoff
* star-fill
* stars
* trophy

#### **Example:**

To add the "award" icon with a badge "Editor's choice", use:

```
award:Editor's choice
```

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2F0OTVDsO9clXcqfbM5rpU%2Fimage.png?alt=media&#x26;token=8d66cd9e-330a-48c1-bf26-f84f9f83a90f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FvtQ9udqdJKeUAFt6fUf5%2Fimage.png?alt=media&#x26;token=a9349be9-7f33-400e-9424-e1f79774182d" alt=""><figcaption></figcaption></figure>

### Custom SVG Icons

To add custom SVG icons for badges, use the `cegg_svg_icon_list` filter. This filter allows you to easily extend the list of available icons by adding new ones. Below is an example of how to add custom icons:

```php
function add_custom_icons($icons) {
    // Check-square icon
    $icons['check-square'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>';
    
    // Star-fill icon
    $icons['star-fill'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>';

    return $icons;
}
add_filter('cegg_svg_icon_list', 'add_custom_icons');

```

{% hint style="info" %}
For more SVG icons, you can explore a large collection from the [Bootstrap Icons Library](https://icons.getbootstrap.com/).&#x20;
{% endhint %}