Accessibility Now
Join our upcoming webinar about accessibility standards and legislation. May 19, 2022.
Blog

Choose these toggling icon web components for your next project

By  
Binh Bui
Binh Bui
·
On Jun 5, 2018 5:00:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

Last week, we covered some cool icon sets, which offer you thousands of icons. Following the same topic, this week we will introduce some toggling icons, which are indispensable for functions with several states (Example: play/pause button).

Transburger-icon by kcmr

Transburger-icon can spice up your whole app with its design. By default, the component shows up as a hamburger icon, which upon clicking will transform to a close icon, or left and right arrows. Users may control the toggling via keyboard.

The thing that makes this component special, is its smooth as butter animation, shaping the full transformation of the icons. Plus, transburger-icon has plenty of customization options that users can alter. They include font size, padding, outline, shadow, background, and many more. Check out the demo below for more details on how to use it.

DemoComponent

Toggle-icon by fxedel

Toggle-icon provides users with plenty of ways to animate the transition, from filling the icon to more complicated ones, like rotating and flipping. Additionally, the component implements iron-icon at its core, meaning that you can use any icon in that set for a button. Remember to import the corresponding symbol library.

You can configure the before and after colors of the figure. In short, by giving users room for choosing the icon, the animation, and the color, the possibilities become endless with this component. For more detailed usage, check out the demo below.

DemoComponent

Compatibility table

The table below will shortly summarize the component’s info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.

Component

Library

Mobile

Browsers

transburger-icon

Polymer^2.0.0

C,S,O,F,E,I

toggle-icon

Polymer^2.1.0

C,S,O,F,E,I

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui