featherish v4.5.0

featherish

Description

Framework-agnostic Web Components vector icons for modern web applications. Design of the icons by Cole Bemis.

Demos

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>

FAQ

...

License

MIT © Michael Bazos