• Stars
    star
    191
  • Rank 202,877 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Icon library

Icon library

Insert the icons in 30 seconds using the new Icon Sets technology.

Installing webicon

You can install this package locally either with npm, bower, or jspm.

npm

npm install webicon

Now you can use require('webicon/angular-webicon') or require('webicon/jquery-webicon') when installing with npm or jsmp and using Browserify or Webpack.

bower

# To get the latest stable version, use bower from the command line.
bower install webicon

# To get the most recent, last committed-to-master version use:
bower install webicon#master 

# To save the bower settings for future use:
bower install webicon --save

# Later, you can use easily update with:
bower update

Please note that webicon requires AngularJS 1.1.x or higher for use as Angular module. Please note that webicon requires jQuery 1.8.x or higher for use as jQuery plugin.

Using the webicon library

Simply include the scripts and stylesheet in your main HTML file in the order shown in the example below. Note that npm will install the files under /node_modules/webicon/ and bower will install them under /bower_components/webicon/.

Simple demo for AngularJS version

<body ng-app="app">
  <webicon icon="material-icons:3d-rotation" alt=""></webicon>
  <webicon icon="font-awesome:home" alt="home"></webicon>
  <webicon icon="fci:checkmark"></webicon>
  <webicon icon="clock"></webicon>
  <webicon icon="//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/search.svg"></webicon>
  <webicon icon="calendar"></webicon>  

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
  <script type="text/javascript" src="/bower_components/webicon/angular-webicon.js"></script>

  <script>
    angular
      .module('app', ['webicon'])
      .config(function($webiconProvider) {
        $webiconProvider
          .svgSet('flat-color-icons', '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/icon-set/icons.svg')
          .alias('flat-color-icons', 'fci')
          .icon('clock', '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/clock.svg')
      });
  </script>
</body>

Simple demo for jQuery version

<body>
  <div data-webicon="material-icons:3d-rotation" data-alt=""></div>
  <div data-webicon="font-awesome:home" data-alt="home"></div>
  <div data-webicon="fci:checkmark"></div>
  <div data-webicon="clock"></div>
  <div data-webicon="//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/search.svg"></div>
  <div data-webicon="calendar"></div>  

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
  <script type="text/javascript" src="/bower_components/webicon/jquery-webicon.js"></script>

  <script>
    $(function() {
      $(document).webicons({
        svgSet: {
          "flat-color-icons": '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/icon-set/icons.svg'
        },
        alias: {
          fci: 'flat-color-icons'
        },
        icon: {
          clock: '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/clock.svg'
        }
      });
    });
  </script>
</body>

More demo here

Features

  • Available all Icons8 open source icons via our api as default source.
  • The icons are stored on our CDN server (which is free forever).
  • You insert the icons right into your code.

More Repositories

1

titanic

A set of animated icons + code to insert them into the webpages
JavaScript
2,433
star
2

flat-color-icons

Free Flat Color Icons
HTML
2,114
star
3

line-awesome

Replace Font Awesome with modern line icons
1,179
star
4

WPF-UI-Framework

A set of UI controls that can be used for designing better user interfaces for Windows.
482
star
5

welovesvg

SVG sets compilation for popular iconic projects
336
star
6

lunacy-docs

Documentation for Lunacy, Graphic Design Software with built-in assets
310
star
7

windows-10-icons

Free Windows 10 Icons
HTML
192
star
8

svg-caster

SVG font to SVG converter
JavaScript
91
star
9

svg-path-bounding-box

SVG path bounding box calculator
JavaScript
60
star
10

impresser

Crawler that crawls and renders your single page website for Googlebot
JavaScript
40
star
11

svg-simplify

SVG simplify tool
JavaScript
31
star
12

free

.free format is an open efficient format for UI Design vector graphics
C#
26
star
13

svg2android

Nodejs-based tool for convert SVG vector graphics files to Android Vector Drawable format
JavaScript
22
star
14

api-docs

Documentation for Icons8 API
API Blueprint
18
star
15

svg-bounding-box

SVG bounding box calculator
JavaScript
16
star
16

bower-webicon

Icon library https://icons8.github.io/webicon/
JavaScript
13
star
17

icons8-shortcuts

Proposed shortcuts for Icons8 desktop app
JavaScript
9
star
18

Icons8_WPF_Search_iOS

Search icon in the iOS style
C#
7
star
19

icon-solution

JavaScript
6
star
20

impresser-html-angular-minifier

JavaScript
6
star
21

impresser-html-minifier

JavaScript
6
star
22

impresser-warm

JavaScript
5
star
23

impresser-blocked-resources

JavaScript
5
star
24

impresser-server

JavaScript
4
star
25

omg-img

CSS
4
star
26

impresser-sitemap

JavaScript
4
star
27

impresser-mysql-storage

JavaScript
3
star
28

icons-docs

2
star
29

Icons8_WPF_Search_Windows10

Search icon in the Windows 10 style
1
star
30

Icons8_WPF_Search_Material

Search icon in the Material style
1
star