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.
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.
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.
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