Skip to content

37 icons · interaction="click-toggle"

Click-to-toggle animated icons

Each click animates between two states and stays there, which makes these icons the visual half of an on/off control. The icon always shows the current state, so pair it with aria-pressed or a checked attribute and the button explains itself.

All click toggle icons

How it behaves

Toggles between two states on click, or switches immediately when reduced motion is preferred.

With reduced motion preferred, a click switches to the other state immediately, without the animation in between. The React component handles all of this; you only pick the icon.

Where to use it

  • Mute and unmute buttons
  • Show and hide password fields
  • Hamburger menu and close buttons
  • Play and pause controls
  • Like, star and bookmark toggles
  • Checkboxes, radio buttons and switches

By category

  • Notifications · 2

    Notification, Notification V2

  • Navigation · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

  • Action · 14

    Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3

  • Form · 3

    Checkbox, Radio button, Toggle

  • Media · 10

    Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume

  • Communication · 1

    Phone Off

  • Devices · 1

    Wifi Off

  • Weather · 2

    Cloud Off, Zap Off

Use it in React

Icons listed here play this interaction by default. Any other icon can use it too: pass the interaction prop.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings normally uses 'hover'
<UseAnimations animation={settings} interaction="click-toggle" size={32} />

Clicks toggle the icon on their own. To keep it in sync with your state, pass active: the icon animates whenever active changes, and clicks no longer toggle it by themselves.

import { useState } from 'react';
import menu from 'react-useanimations/lib/menu';

export function MenuButton() {
  const [open, setOpen] = useState(false);
  return (
    <UseAnimations
      animation={menu}
      active={open} // true shows the end state
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Close menu' : 'Open menu'}
    />
  );
}

Every prop is in the documentation. Outside React, the icons are Lottie JSON files; Lottie icons shows how to recreate the interactions with lottie-web.

FAQ

Which icons use the click toggle interaction?

37 icons: Notification, Notification V2, Burger Menu, Menu V2, Menu V3, Menu V4, Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off and 22 more. Click-to-toggle icons typically drive mute/unmute, show/hide password, menu/close, play/pause and like buttons.

What happens when the user prefers reduced motion?

With reduced motion preferred, a click switches to the other state immediately, without the animation in between. The React component reads prefers-reduced-motion and updates when the setting changes, so you don't need any code for it.

How do I change an icon's interaction?

Every icon plays the interaction it was designed for. Pass interaction="click-toggle" to give any other icon this behaviour, or another value ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') to change it. The autoplay, loop and speed props adjust playback. To control the state yourself, pass active={isOn} and update it in onClick: clicks then no longer toggle the icon on their own.