Framework-agnostic Web Components vector icons for modern web applications. Design of the icons by Cole Bemis.
| No framework | Angular | React | Vue |
|---|---|---|---|
| Demo | Demo | Demo | Demo |
1. Install the package
npm install featherish2. Import icons you need
import 'featherish/icons/github';
import 'featherish/icons/gitlab';
import 'featherish/icons/heart';
import 'featherish/icons/moon';3. Use
<i-github></i-github>
<i-gitlab></i-gitlab>
<i-heart></i-heart>
<i-moon></i-moon>Note that you might need to add a polyfill. For that, npm install @webcomponents/custom-elements and import the polyfill before importing the icons.
import '@webcomponents/custom-elements/src/native-shim';Icons can be customised with any CSS property that you can apply on a SVG element.
<i-heart class="big fill-red"></i-heart>.big {
height: 50px;
width: 50px;
}
.fill-red {
fill: red;
}Refer to the table below for the list of all available icons.
 <i-activity> |
 <i-airplay> |
 <i-alert-circle> |
 <i-alert-octagon> |
 <i-alert-triangle> |
 <i-align-center> |
 <i-align-justify> |
 <i-align-left> |
 <i-align-right> |
 <i-anchor> |
 <i-aperture> |
 <i-arrow-down-circle> |
 <i-arrow-down-left> |
 <i-arrow-down-right> |
 <i-arrow-down> |
 <i-arrow-left-circle> |
 <i-arrow-left> |
 <i-arrow-right-circle> |
 <i-arrow-right> |
 <i-arrow-up-circle> |
 <i-arrow-up-left> |
 <i-arrow-up-right> |
 <i-arrow-up> |
 <i-at-sign> |
 <i-award> |
 <i-bar-chart-2> |
 <i-bar-chart> |
 <i-battery-charging> |
 <i-battery> |
 <i-bell-off> |
 <i-bell> |
 <i-bluetooth> |
 <i-bold> |
 <i-book-open> |
 <i-book> |
 <i-bookmark> |
 <i-box> |
 <i-briefcase> |
 <i-calendar> |
 <i-camera-off> |
 <i-camera> |
 <i-cast> |
 <i-check-circle> |
 <i-check-square> |
 <i-check> |
 <i-chevron-down> |
 <i-chevron-left> |
 <i-chevron-right> |
 <i-chevron-up> |
 <i-chevrons-down> |
 <i-chevrons-left> |
 <i-chevrons-right> |
 <i-chevrons-up> |
 <i-chrome> |
 <i-circle> |
 <i-clipboard> |
 <i-clock> |
 <i-cloud-drizzle> |
 <i-cloud-lightning> |
 <i-cloud-off> |
 <i-cloud-rain> |
 <i-cloud-snow> |
 <i-cloud> |
 <i-code> |
 <i-codepen> |
 <i-command> |
 <i-compass> |
 <i-copy> |
 <i-corner-down-left> |
 <i-corner-down-right> |
 <i-corner-left-down> |
 <i-corner-left-up> |
 <i-corner-right-down> |
 <i-corner-right-up> |
 <i-corner-up-left> |
 <i-corner-up-right> |
 <i-cpu> |
 <i-credit-card> |
 <i-crop> |
 <i-crosshair> |
 <i-database> |
 <i-delete> |
 <i-disc> |
 <i-dollar-sign> |
 <i-download-cloud> |
 <i-download> |
 <i-droplet> |
 <i-edit-2> |
 <i-edit-3> |
 <i-edit> |
 <i-external-link> |
 <i-eye-off> |
 <i-eye> |
 <i-facebook> |
 <i-fast-forward> |
 <i-feather> |
 <i-file-minus> |
 <i-file-plus> |
 <i-file-text> |
 <i-file> |
 <i-film> |
 <i-filter> |
 <i-flag> |
 <i-folder-minus> |
 <i-folder-plus> |
 <i-folder> |
 <i-git-branch> |
 <i-git-commit> |
 <i-git-merge> |
 <i-git-pull-request> |
 <i-github> |
 <i-gitlab> |
 <i-globe> |
 <i-grid> |
 <i-hard-drive> |
 <i-hash> |
 <i-headphones> |
 <i-heart> |
 <i-help-circle> |
 <i-home> |
 <i-image> |
 <i-inbox> |
 <i-info> |
 <i-instagram> |
 <i-italic> |
 <i-layers> |
 <i-layout> |
 <i-life-buoy> |
 <i-link-2> |
 <i-link> |
 <i-linkedin> |
 <i-list> |
 <i-loader> |
 <i-lock> |
 <i-log-in> |
 <i-log-out> |
 <i-mail> |
 <i-map-pin> |
 <i-map> |
 <i-maximize-2> |
 <i-maximize> |
 <i-menu> |
 <i-message-circle> |
 <i-message-square> |
 <i-mic-off> |
 <i-mic> |
 <i-minimize-2> |
 <i-minimize> |
 <i-minus-circle> |
 <i-minus-square> |
 <i-minus> |
 <i-monitor> |
 <i-moon> |
 <i-more-horizontal> |
 <i-more-vertical> |
 <i-move> |
 <i-music> |
 <i-navigation-2> |
 <i-navigation> |
 <i-octagon> |
 <i-package> |
 <i-paperclip> |
 <i-pause-circle> |
 <i-pause> |
 <i-percent> |
 <i-phone-call> |
 <i-phone-forwarded> |
 <i-phone-incoming> |
 <i-phone-missed> |
 <i-phone-off> |
 <i-phone-outgoing> |
 <i-phone> |
 <i-pie-chart> |
 <i-play-circle> |
 <i-play> |
 <i-plus-circle> |
 <i-plus-square> |
 <i-plus> |
 <i-pocket> |
 <i-power> |
 <i-printer> |
 <i-radio> |
 <i-refresh-ccw> |
 <i-refresh-cw> |
 <i-repeat> |
 <i-rewind> |
 <i-rotate-ccw> |
 <i-rotate-cw> |
 <i-rss> |
 <i-save> |
 <i-scissors> |
 <i-search> |
 <i-send> |
 <i-server> |
 <i-settings> |
 <i-share-2> |
 <i-share> |
 <i-shield-off> |
 <i-shield> |
 <i-shopping-bag> |
 <i-shopping-cart> |
 <i-shuffle> |
 <i-sidebar> |
 <i-skip-back> |
 <i-skip-forward> |
 <i-slack> |
 <i-slash> |
 <i-sliders> |
 <i-smartphone> |
 <i-speaker> |
 <i-square> |
 <i-star> |
 <i-stop-circle> |
 <i-sun> |
 <i-sunrise> |
 <i-sunset> |
 <i-tablet> |
 <i-tag> |
 <i-target> |
 <i-terminal> |
 <i-thermometer> |
 <i-thumbs-down> |
 <i-thumbs-up> |
 <i-toggle-left> |
 <i-toggle-right> |
 <i-trash-2> |
 <i-trash> |
 <i-trending-down> |
 <i-trending-up> |
 <i-triangle> |
 <i-truck> |
 <i-tv> |
 <i-twitter> |
 <i-type> |
 <i-umbrella> |
 <i-underline> |
 <i-unlock> |
 <i-upload-cloud> |
 <i-upload> |
 <i-user-check> |
 <i-user-minus> |
 <i-user-plus> |
 <i-user-x> |
 <i-user> |
 <i-users> |
 <i-video-off> |
 <i-video> |
 <i-voicemail> |
 <i-volume-1> |
 <i-volume-2> |
 <i-volume-x> |
 <i-volume> |
 <i-watch> |
 <i-wifi-off> |
 <i-wifi> |
 <i-wind> |
 <i-x-circle> |
 <i-x-square> |
 <i-x> |
 <i-zap-off> |
 <i-zap> |
 <i-zoom-in> |
 <i-zoom-out> |
...
MIT © Michael Bazos