Design and build a collaborative user experience for a chance to win cool prizes!
Blog

Top 3 Polymer icon sets for your web app

By  
Binh Bui
Binh Bui
·
On May 30, 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.

“I believe that good icons are more akin to road signs rather than illustrations, and ideally should present an idea in a clear, concise, and memorable way.” - Susan Kare, Designer of legendary Macintosh 1984 icons.
This quote comes from the Apple Creative Director, Susan Kare, the lady who gave Macintosh a smiling icon, the “Happy Mac”. Using icons was a revolutionary move along the graphic user interface. However, despite being ubiquitous, good icons are like good friends. They are hard to find.

In this blog, we will present the top 3 icon collections, developed using the Web Components standard.

Iron-icons by PolymerElements

Being the biggest of them all, iron-icons consists of more than 900 symbols, which are divided under 11 categories, such as the basic set, the communication set, the hardware, and many more. The basic set is available upon importing the iron-icons component, for other subset, users will have to load the dependency with the corresponding library name.

DemoComponent

D2l-icons by BrightspaceUI

D2l-icons is the successor of vui-icons, with the unofficial name “pre-daylight”. While not offering that many independent icons, d2l-icons does provide categories with different level of detailing and different styling. The five categories are tier1, tier2, tier3, html-editor and emoji. More details on each group’s characteristics can be found here.

DemoComponent

Vaadin-icons by Vaadin

Using lumo theme for styling, vaadin-icons has a fresh and intriguing look. Unlike the first two, it does not define any specific categories, but rather keep it a large set of icons for the sake of freedom and simplicity.

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

Amount

Library

Mobile

Working

iron-icons

960

Polymer 1.9 - 2

C, S, O, F, E, I

d2l-icons

461

Polymer 1.9 - 2

C, S, O, F, E, I

vaadin-icons

636

Polymer^2.0.0

C, S, O, F, E, I

Final thoughts

Generally speaking, we believe each aforementioned set has its own trademark and advantage. Iron-icons makes its brand for being the biggest and first set, d2l-icons offers users multiple distinct icon groups, while vaadin-icons is an overall large, uncategorized collection. Knowing your preference and need is the key to choosing here. It is also good to remember that their base technology, Web Components, allows them to work flawlessly on any given platform and browser.

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