demo | ||
dist | ||
src/scss | ||
.gitignore | ||
bower.json | ||
composer.json | ||
gulpfile.js | ||
LICENSE | ||
package.json | ||
README.md |
File Vector Icons
A collection of file type/extension SVG icons, licensed MIT and available free for use in your applications.
- Please post feedback or issues.
- I pay to license several of the icons used in these sets. Donations are appreciated.
- 💡 If you have an idea, such as new icon requests, additional collections/designs, and/or are willing to contribute a library/design, please let me know! My time is limited, but I will get to it eventually.
- ⭐ If you use this library to create something cool, tell me about it!
Icon Sets
Currently, there are two icon sets in the dist/icons
directory:
- Classic - An expansion of the Redboot free-file-icons designs.
- Vivid - Inspired by Erlen Masson
- Square Outline (in progress) - Modified from and inspired by Cotne Nazarashvili
NB! The Square Outline collection will not be available via unpkg or jsDeliver until release.
📌 Demo: View Icon Sets
Installation
NPM
npm install file-icon-vectors
Bower
bower install file-icon-vectors
Composer
composer require dmhendricks/file-icon-vectors
Linking Stylesheets
To display a file icon, simply link to one or both of the icon set CSS files in the css
directory:
<link rel="stylesheet" href="dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="dist/file-icon-vivid.min.css" />
CDN: unpkg
For releases:
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@0.8.1/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@0.8.1/dist/file-icon-vivid.min.css" />
CDN: jsDelivr
Supports both HTTP and HTTPS.
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors/dist/file-icon-vivid.min.css" />
CDN: GitHack
Supports branches as endpoints (such as master
).
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" />
Usage
Each set has its own CSS prefix:
cla
- Classicviv
- Vividsqo
- Square Outline
Examples:
<span class="fiv-cla fiv-icon-ppt"></span>
<span class="fiv-cla fiv-icon-xls"></span>
<span class="fiv-viv fiv-icon-pdf"></span>
<span class="fiv-viv fiv-icon-wav"></span>
<span class="fiv-sqo fiv-icon-doc"></span>
Notice that the classes contain either flv-cla
for the Classic set, flv-viv
for the Vivid set, etc.
If you want to override the size of the icons, you can do so with CSS:
<style>
.fiv-cla, .fiv-viv, .fiv-sqo { font-size: 3em; }
</style>
If you prefer, you may also use .fiv-size-md
, .fiv-size-lg
and .fiv-size-xl
to modify the icon sizes:
<span class="fiv-viv fiv-icon-pdf fiv-size-lg"></span>
Catalog JSON
Each icon set has a catalog.json
file that includes all icons included in the library. You can optionally use this to check for files that exist, and where missing, set an alternate icon.
Generic icons include blank.svg
, folder.svg
, image.svg
.
Special Thanks
- GitHack, unpkg and jsDelivr
- The File Extensions Database by Sharpened Productions
- Markdown Editor by James Taylor
- SVG optimiser by Peter Collingridge
- SVGito by Sketch Master
- Gulp and Sass
Even though I'm paying for them, thanks also to Adobe, The Noun Project and FlatIcon for providing great tools and services. 👍 😄
Legal Stuff
All icons used in the creation of this library were licensed MIT or purchased royalty-free, with exceptions noted below. All logos are copyright their respective owners.
If you feel that you have a copyright issue, please feel free to post it.
Attribution
- Android icon provided by Google via flaticon.com
- QuickTime icon provided by Pixel Perfect via flaticon.com
- BitTorrent icon provided by noshery from icons101.com
- GIMP, PowerShell, C++, C# provided by Icons8 LLC
- Sass, Globe icons provided by oNline Web Fonts
- Classic set Folder Icon made by Snip Master from Iconfinder
- Classic Windows Logo icon from Wdwdbot at Wikimedia Commons
- Maven icon provided by OnlineWebFonts