icons8 / Webicon
Licence: mit
Icon library
Stars: ✭ 190
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Webicon
Blade Heroicons
A package to easily make use of Heroicons in your Laravel Blade views.
Stars: ✭ 173 (-8.95%)
Mutual labels: svg, icons
Vue Eva Icons
Is a pack of more than 480 beautiful open source Eva icons as Vue components
Stars: ✭ 189 (-0.53%)
Mutual labels: svg, icons
Rmdi
React Material Design Icons – built with Pixo, Styled Components, and Styled System
Stars: ✭ 132 (-30.53%)
Mutual labels: svg, icons
Php badge
This is an identification tag based on SVG, It can quickly generate various labels and status identifiers
Stars: ✭ 101 (-46.84%)
Mutual labels: svg, icons
Svg To Ts
Build performant SVG icon libraries by converting raw SVG files to TypeScript that is optimized for modern tree shaking mechanisms.
Stars: ✭ 131 (-31.05%)
Mutual labels: svg, icons
Glyphs
A dynamic design system for managing large icon sets in Figma and using them on the web
Stars: ✭ 140 (-26.32%)
Mutual labels: svg, icons
Teenyicons
Tiny minimal 1px icons designed to fit in the smallest places.
Stars: ✭ 1,631 (+758.42%)
Mutual labels: svg, icons
Aegis Icons
Unofficial 2FA entry icons for open source Android authenticator Aegis
Stars: ✭ 153 (-19.47%)
Mutual labels: svg, icons
Coreui Icons
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
Stars: ✭ 1,813 (+854.21%)
Mutual labels: svg, icons
Svgiconimagelist
Three engines to render SVG (GDI+, Direct2D or Cairo) and four components to simplify use of SVG images (resize, fixedcolor, grayscale...): TSVGIconImage, TSVGIconImageCollection, TSVGIconVirtualImageList and TSVGIconImageList (for VCL and FMX).
Stars: ✭ 127 (-33.16%)
Mutual labels: svg, icons
File Icon Vectors
A collection of file type icons in SVG format
Stars: ✭ 171 (-10%)
Mutual labels: svg, icons
Flagpack Core
Flagpack contains 260+ easily implementable flag icons to use in your design or code project.
Stars: ✭ 127 (-33.16%)
Mutual labels: svg, icons
Feathericon
simply generic vector icon collection - including sketch file, svg files, and font files.
Stars: ✭ 178 (-6.32%)
Mutual labels: svg, icons
Styled Icons
💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
Stars: ✭ 1,878 (+888.42%)
Mutual labels: svg, icons
Svg Icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
Stars: ✭ 112 (-41.05%)
Mutual labels: svg, icons
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+5614.74%)
Mutual labels: svg, icons
Circle Flags
A collection of 300+ minimal circular SVG country flags
Stars: ✭ 139 (-26.84%)
Mutual labels: svg, icons
Materialdesign Svg
@mdi/svg Dist for Material Design Icons.
Stars: ✭ 166 (-12.63%)
Mutual labels: svg, icons
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].