flexicon - SVG icon collection.

  •        6

Released under the MIT license.




Related Projects

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

grunticon - A mystical CSS icon solution.

  •    HTML

grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it's easy to use, as it generates a class referencing each icon, and doesn't use CSS sprites. grunticon takes a folder of SVG/PNG files (typically, icons that you've drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.

iconizr - A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output

  •    CSS

To leverage iconizr to the greatest extent possible, some additional tools have to be installed on the system independently (see below). iconizr is written in (namespaced) PHP and meant to be used on the (Linux) command line (i.e. with the PHP CLI SAPI). To be honest, there was only one reason making me go for PHP: It is what I know best. Im sure there are quite some other fancy modern languages and techniques one could use for achieving the same, but I guess I'm just not smart enough for those. Having said this, I'd welcome anyone contributing a port of iconizr.

vivid - a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

  •    Javascript

Vivid.JS is an SVG Icons library which can be used to add highly customizable vibrant icons to the DOM without any dev dependencies. Vivid.JS is easy to adapt and can bring SVG icons to life using html5 data attributes on the go. Icons can also be individually customized in terms of colors and size using html5 data attributes which gives more power to Vivid.JS library.

simple-icons - SVG icons for popular brands

  •    HTML

Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech. Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.

svg-icon-system-boilerplate - A boilerplate for building a custom icon system via a linked external SVG sprite

  •    HTML

A boilerplate for building a custom icon system via a linked external SVG sprite. Configuration Options -- this system is based on SVG-sprite. sprite.svg is the main file containing a sprite of each SVG included using <symbol> inside of SVG <defs>. This system implements SVG icons via to access individual icons.

svg4everybody - Use external SVG spritemaps today

  •    Javascript

SVG for Everybody adds SVG External Content support to all browsers. To use it now, include the script in your document.

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

payment-icons - 💳 Payment / Ecommerce related svg icon packs

  •    Javascript

Payment related svg icons for use in fonts or spritesheets. The raw .svg output (from a mix of sketch and inkscape) is in the svg directory. The minified svg output is in the min dir.

boxicons - High Quality web friendly icons

  •    CSS

'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience. Total of 798 icons in regular, solid styles.

open-iconic - An open source icon set with 223 marks in SVG, webfont and raster formats

  •    CSS

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute). Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

sprite.sh - A Bash script to build a SVG sprite from a folder of SVG files (typically icons).

  •    Javascript

A Node.js script to build a SVG sprite from a folder of SVG files (typically icons). Or you know, you can also just copy the script.

gulp-svg-sprites - Create SVG sprites or compile to <symbols>

  •    Javascript

Install it locally to your project. Windows note: Using Version < 4.0.0, make sure you also have all prerequisites for node-gyp.

devicon - Set of icons representing programming languages, designing & development tools

  •    CSS

Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark. See all available icons on the new website.

vue-awesome - Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

  •    Javascript

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons. Vue-Awesome an SVG icon component for Vue.js, with built-in icons courtesy of Font Awesome.

vue-unicons - 1000+ Pixel-perfect svg icons for your next project as Vue components

  •    Vue

A simple way to add the necessary icons and install them. Installing with npm is recommended and it works seamlessly with webpack.

SuperTinyIcons - Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

  •    HTML

The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs. Bytes cost money. They cost money to store, transport, and process. Simplicity should be our goal in all endeavours.

map-icons - An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels

  •    HTML

Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS. Keep track development updates by following @map_icons on Twitter.