---
title: Switch icon
summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
banner: icons
description: Transition between two icons smoothly.
---
## Default markup
To replace the icons, all should add `active` class to the `switch-icon` component.
```html example centered
```
## Switch animations
You can also add a fancy animation to add variety to your button. See demo below:
```html example centered separated
```