---
title: Styling
slug: '423'
canonical_url: https://docs.coveo.com/en/423/
collection: javascript-search-framework
source_format: adoc
---
# Styling
To visually change how the Coveo JavaScript Search Framework is displayed, style it using standard CSS rules (see [CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)).
The Coveo JavaScript Search Framework doesn't offer any special way to change its styling.
However, the following tips can help you when adding custom style rules:
* All Coveo components have a class that starts with `Coveo` followed by the component name.
You can find a list of all the components in the JavaScript Search reference documentation (see [Coveo JavaScript Search Framework - Reference Documentation](https://coveo.github.io/search-ui/globals.html)).
* The default styling is available in the JavaScript Search GitHub project, in the `sass` file (see [Coveo JavaScript Search UI Framework](https://github.com/coveo/search-ui)).
The CSS is written using Sass (see [Sass](http://sass-lang.com/)).
* You're strongly discouraged from changing the `css` files that come out of the box with the Coveo JavaScript Search Framework, as they can be overwritten when upgrading.
Instead, you're encouraged to create your own files and reference them in your search page.
* As a leading practice, you should add a class to your CoveoSearchInterface component:
```xml
```
This allows you to be more precise when adding CSS rules:
```css
.MyCustomClass.CoveoSearchInterface {
/*
This CSS rule will only be applied to one specific CoveoSearchInterface.
Also, since it's narrower, it will easily override the default CoveoSearchInterface css.
*/
}
.MyCustomClass .CoveoFacet {
/*
The same principle applies to all the Coveo components inside that search interface.
*/
}
```
## Customizing SVG icons
All icons in the Coveo JavaScript Search Framework are SVG (see [SVG: Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG)).
You can easily customize or replace these icons using your own CSS rules.
### Styling the default icons
To achieve a great looking integration with the Coveo JavaScript Search Framework, you may need to modify the default SVG icons.
It's possible to alter any visual aspect of an SVG (color, size, hover effect, etc.) using CSS rules.
All Coveo JavaScript Search Framework SVG icons (except for the result file type SVG icons, which are displayed by the `ResultList` component) are inlined in the HTML.
This gives you maximum control over the SVG styling, and allows you to inspect the HTML of your page to see how each SVG is built, and what style is currently being applied to it, so that you can customize it to better suit your needs.
Each SVG and its container has a CSS class that you can use to override the default styling.
Some icons, such as the ones that have a hover effect, have extra CSS classes on their inner SVG elements to allow for more customization.
Remember that in order to correctly override the default styles, you must achieve higher CSS specificity (see [Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)).
**Example**
Suppose you want to style the default `SearchButton` icon (the magnifier icon) in your search page to make it red.
If you inspect this icon, you can see that its markup currently looks like this:
```html
```
Most Coveo JavaScript Search Framework SVG icons have their `fill` attribute set to the `currentColor` value to determine their color.
When this is the case, you can change the color of the SVG by setting its `color` property.
In this case, since the SVG element you want to modify has the `coveo-search-button-svg` CSS class, you can use this class to override the default color styling:
```css
.CoveoSearchButton .coveo-search-button-svg {
color: red;
}
```
You could also want to modify the hover effect on the `SearchButton` icon.
By default, the circle of the magnifier becomes yellow.
Suppose you want it to become black instead.
SVG icons are built using `` elements.
In this case, you can see that the SVG icon you want to modify has a `` element with the `coveo-magnifier-circle-svg` CSS class.
This element identifies the circle of the magnifier icon.
You can use the `coveo-magnifier-circle-svg` class selector along with the `:hover` pseudo-selector to modify the hover effect:
```css
.CoveoSearchButton:hover .coveo-magnifier-circle-svg {
fill: black;
}
```
SVG icons with hover effects always have an additional CSS class for the changing SVG element.
You can use this class to override the default hover effect.
> **Leading practice**
>
> You should always use your web development tools to inspect the page and verify what the current style of the SVG is.
> This will help you know which CSS selectors to use and also what to override.
### Replacing the default icons
Each SVG icon has its own container element.
To replace an SVG icon, use the background of this container to display the graphic of your choice.
**Example**
Suppose you want to completely replace the default `SearchButton` SVG icon (the magnifier icon) in your search page.
If you inspect the `SearchButton`, you can see that its markup currently looks like this:
```xml
```
The element with the `coveo-search-button` class is the container for the SVG element with the `coveo-search-button-svg` class.
If you hide the SVG element and display your own icon in the container instead, you can replace the magnifier icon with your own:
```css
.CoveoSearchButton .coveo-search-button-svg {
width: 0;
height: 0;
}
.coveo-search-button {
// Your CSS to display your icon.
}
```
### Working with file type icons
The icons that indicate the file type of a result aren't inlined in the HTML like the other icons.
Instead, the `background-image` CSS property is used to display these icons.
This allows for icon assignation using CSS classes.
Since these icons aren't inline in the HTML, it's impossible to modify them using CSS as in the previous examples.
The `Icon` component is responsible for setting the correct icon in a result template.
This component has a `value` option which lets you set your own icon rather than the auto-selected one.
To use this option, you should take a look at the icon list which is available in the Coveo JavaScript Search Framework bundle or https://static.cloud.coveo.com/searchui/v2.10125/image/icon-list.html[here] on our CDN.
It displays all the icons and their corresponding CSS class (if one is available).