---
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
The icon transition is triggered by adding an `.active` class to the `switch-icon` component.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Switch animations
You can also add a fancy animation to add variety to your button. See demo below:
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}