# 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="/files/xAIVldNcEg3Ak5YEzgPM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/H7pnTUesqggte5hIvgvX" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ce-docs.keywordrush.com/set-up-products/how-to-add-badge-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.