featherish

Description

Web components vectorial icons for modern web applications. Design of the icons by Cole Bemis.

Demo

>> See live demo <<

Usage

1. Install the package

npm install featherish

2. 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';

Styling icons

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;
}

Available icons

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