---
title: Use custom icons in result templates
slug: '318'
canonical_url: https://docs.coveo.com/en/318/
collection: javascript-search-framework
source_format: adoc
---
# Use custom icons in result templates
The [JavaScript Search Framework](https://docs.coveo.com/en/187/) comes with a default set of icons.
The prebuilt [result templates](https://docs.coveo.com/en/413/) take advantage of the [`Icon`](https://coveo.github.io/search-ui/components/icon.html) component to output the corresponding icon for a given file type.



You can use custom icons instead of the default ones by creating a CSS class for each of your custom icons and referring to this class in the `Icon` component.

## Using custom icons

. Add a CSS class for a custom icon in your search page HTML or in a CSS resource.
. In the search page HTML, in the result template for which you want to change the icon, locate the element with the `CoveoIcon` class.
Add the `data-value="<NAME>"` attribute, where you replace `<NAME>` with the name of your custom icon CSS class.

You can also use the [`labelValue`](https://coveo.github.io/search-ui/components/icon.html#options.labelvalue) option to set a tooltip on the icon by adding the `data-label-value="<LABEL>"` attribute, where you replace `<LABEL>` with the desired label.


> **Note**
>
> Some of the prebuilt templates use the [`small`](https://coveo.github.io/search-ui/components/icon.html#options.small) option, which outputs a smaller version of the icon.
> When adding your own icon, you may want to add the `data-small="false"` attribute to ensure the option is disabled.

## Example use case

You want your Atlassian Jira Software Cloud source results to include the Jira Software icon.
You create a CSS class for a background image referring to the [www.atlassian.com/software/jira](https://www.atlassian.com/software/jira) favicon.
The default icons are 60px by 60px in size.

```css
.icon-jira {
	display: inline-block;
	background-image: url(<JIRA_FAVICON_CDN_ADDRESS>);
	background-size: 60px;
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
}
```

In the Jira Software Cloud result template, you add the `data-value="icon-jira"` attribute to the element with the `CoveoIcon` class.

```xml
<span class="CoveoIcon"
	data-value="icon-jira"
	data-label-value="Jira">
</span>
```