File Vector Icons

A collection of file type SVG icons, licensed MIT and available for free use for your applications.

• If you have feedback, bugs or requests, please feel free to post them.
• I pay to license many of the icons used in these sets. Donations are appreciated.

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

📌 Demo: View Icon Sets

Installation

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

Composer

composer require dmhendricks/file-icon-vectors

Instructions

Include 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

<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

<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" />

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>

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 { 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>

TODO

• Fix inconsistent sizing in classic set
• Add additional library sets
• Improve Gulp automation tasks

Legal Stuff

All icons used in the creation of this library were licensed MIT or purchased royalty-free, with exceptions noted below.

If you feel that you have a copyright issue, please feel free to post it.

Attribution

• Android icon made by Google via flaticon.com
• BitTorrent icon made by noshery from icons101.com
• GIMP Icon provided by Icons8 LLC
• Vivid set Folder Icon made by Snip Master from Iconfinder

Screenshot - Vivid Collection