svg-iconAn ultimate svg icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.
DownloadYou can download as many SVG icons as you need in homepagehomepage, or download the whole collection via
npm install svg-icon --save
dist/ ├── svg-icon-element.js └── svg-icon-element.css
use it locally
# clone the project git clone https://github.com/leungwensen/svg-icon.git # install dependencies cd svg-icon npm i # startup a local server gulp
SVG icon collectionsname | id prefix | source | supported ----|----|----|---- ant-design | ant- | http://ant.design/#/components/icon | yes bootstrap | bootstrap- | https://github.com/twbs/bootstrap | yes devicons | dev- | https://github.com/vorillaz/devicons | yes elusive-iconfont | elusive- | https://github.com/reduxframework/elusive-iconfont | yes entypo | entypo- | https://github.com/danielbruce/entypo | yes evil-icons | evil- | https://github.com/outpunk/evil-icons | yes flag-icon | flag- | https://github.com/lipis/flag-icon-css | yes flat-ui | flat- | https://github.com/designmodo/Flat-UI | yes font-awesome | awesome- | https://github.com/FortAwesome/Font-Awesome | yes foundation | foundation- | https://github.com/zurb/foundation-icon-fonts | yes game-icons | game- | https://github.com/game-icons/icons | yes geomicons-open | geom- | https://github.com/jxnblk/geomicons-open | yes icomoon-free | icomoon- | https://github.com/Keyamoon/IcoMoon-Free | yes ioncons | ionic- | https://github.com/driftyco/ionicons | yes maki | maki- | https://github.com/mapbox/maki | yes map-icons | map- | https://github.com/scottdejonge/map-icons | yes material-design | material- | https://github.com/google/material-design-icons | yes metro-ui-css | metro- | https://github.com/olton/Metro-UI-CSS | yes mfglabs-iconset | mfglabs- | https://github.com/MfgLabs/mfglabs-iconset | yes octicons | oct- | https://github.com/primer/octicons | yes open-iconic | open- | https://github.com/iconic/open-iconic | yes payment-font | payment- | https://github.com/vendocrat/PaymentFont | yes payment-webfont | payment-web- | https://github.com/orlandotm/payment-webfont | yes semantic-ui | (oct-/awesome-) | https://github.com/Semantic-Org/Semantic-UI/ | yes simple-icons | simple- | https://github.com/danleech/simple-icons | yes subway | subway- | https://github.com/mariuszostrowski/subway | yes typicons | typcn- | https://github.com/stephenhutchings/typicons.font | yes weather-icons | weather- | https://github.com/erikflowers/weather-icons | yes windows-icons | windows- | https://github.com/Templarian/WindowsIcons | yes zero | zero- | src/zero | yes zocial | zocial- | https://github.com/smcllns/css-social-buttons | yes logos(svg porn) | logos- | http://svgporn.com | yes
Need more? Please leave an issueissues or a pull requestpull-requests.
Build your own collection
npm install svg-icon -g
- Define a collection file (JSON format, demo)
- Build it:
svg-icon build --source $path/to/icons.json --target $path/to/dest --name wow
Now you have a SVG sprite file and a demo page.
$path/to/dest/wow/ ├── index.html └── svg-symbols.svg
How did you collect all these SVG icons?There are basically two kinds of icon collections, ones with SVG source files, and others with only icon fonts.
- Those with SVG source files: I simply copy the icons to the dest folder, optimise them, trim the pads around every icon, and build an SVG sprite file from them.
- Those with icon fonts: I need to separate every icon from a combined SVG font file(locating, transforming, etc.), optimise them, trim them, and build an SVG sprite.
So the data flow is like:
Sources(SVG icons/icon fonts) ---separating/copying---> SVG icons ---optimising---> mid products(dist/svg/*) ---trimming---> final products(dist/trimmed-svg/*) ---building---> SVG sprite
Is the contributing toolchain ready for me?Yes, and no.
The collection of 10,000+ SVG icons is mostly collected by nodejs scripts(check out these folders for details
lib). But I still have to write some code when I want to add icons from a new vendor into this project, because of the uncertainty of icon collections.
If you are familiar with nodejs and SVG, and interested in making this collection more useful, please leave a PRpull-requests. Feel free to contact me if you have any question.
Of course, the quickest way to add your favorite icons here is to leave an issueissues, and let me do the rest for you ;-).
- svgo: transforming and optimizing SVG icons would be impossible without this awesome project.
vinyl-fshelped me to process large amount of files without any pain.
- phantomjs: it is the answer of lots of problems.
- a lot more