Cover illustration. The files are listed under What's inside.
Toggle Switch Collection
Toggle switches in pill, icon and labeled styles with on and off values and four states, 48 variants, plus a CSS-only switch.
Fits your $30 budget
Added to your cart.View your cart
- Includes the Standard license: personal, commercial and client work for one person.
- Instant download after payment, plus an email with links that stay active for 30 days.
- Refund within 14 days if you haven't downloaded it yet, if it doesn't work in the supported software listed here, or if it's faulty and we can't fix it.
- Contents
- 48 variants
- File formats
- .fig, .sketch, .html, .css, .png
- Supported software
- Figma, Sketch, HTML/CSS
- Download size
- 3 MB
- Good for
- Settings screens
- Notification preferences
- Feature on and off controls
About this product
Plain pill, icon-in-knob and labeled-track switches are the three styles here, the last showing on and off text inside the track. Each is built in two sizes, both values and four states (default, hover, keyboard focus and disabled), which comes to 48 variants. As Figma interactive components, the switches flip in prototypes with a 200 ms ease.
Developers also get an HTML and CSS switch built on a native checkbox input, so keyboard and screen reader behavior comes from the browser rather than custom scripts. Use it for settings screens, notification preferences and other on or off choices that take effect immediately.
What's inside
- 48 variants: 3 styles × 2 values × 4 states × 2 sizes
- Plain pill, icon-in-knob and labeled-track styles
- Interactive components that switch with a 200 ms ease
- CSS-only switch built on a native checkbox input
- Light and dark color styles
License
Standard license
Included with every purchase
For one person. Use the assets in unlimited personal and commercial projects, including work you deliver to clients.
Allowed
- Design a client's website with a UI kit and hand over the finished site
- Use the same asset in as many of your projects as you like
- Build your startup's pitch deck from a presentation template
- Use an icon set throughout your company's web app
Not allowed
- Reselling, sharing, sublicensing or giving away the files, as they are or modified, for example on stock sites or marketplaces
- Uploading the files anywhere others can download or extract them, such as a public repository
- Letting several people work from one Standard license (a Team license covers that)
- Selling print-on-demand merchandise or templates built on the assets without an Extended license