9.9 KiB
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 many 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 is not yet available via npm, Bower or CDN.
📌 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
Recommended for performance.
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors/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: RawGit
<link rel="stylesheet" href="https://cdn.rawgit.com/dmhendricks/file-icon-vectors/0.8.1/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/dmhendricks/file-icon-vectors/0.8.1/dist/file-icon-vivid.min.css" />
Example Usage
From there, you can use CSS classes to display the icons:
<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 or flv-viv for the Vivid set.
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>
Special Thanks
- unpkg and jsDelivr
- 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 and used with permission.
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
- Vivid set Folder Icon made by Snip Master from Iconfinder
- Classic Windows Logo icon from Wdwdbot at Wikimedia Commons
Screenshot - Vivid Collection
