CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Switch Icon

An icon transition generator that works with any icons.

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Switch Icon component is used to create a transition between two icons. You can use any icon you want. In the demo we use inline SVG, but it works also with icon fonts and SVG symbols.

You can choose among different transition effects by applying one of the following class modifiers:

  • .switch-icon--scale
  • .switch-icon--rotate
  • .switch-icon--flip
  • .switch-icon--slide-up
  • .switch-icon--slide-down
  • .switch-icon--slide-right
  • .switch-icon--slide-left

The transition is triggered by the click on the button (.switch-icon). You can change this behavior, and trigger the transition on :hover by applying the .switch-icon--hover class modifier.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us