A collection of file type/extension SVG icons, available free for use in your applications.
Currently, there are three icon sets in the dist/icons
directory:
Next release:
Once that is released, I'd like to focus on a webfont, ideally where you can create your own file icons with stacking, just like Font Awesome.
npm install file-icon-vectors
bower install file-icon-vectors
:rotating_light: NB! Because I didn't use semver, the current release is not available from Bower. It will be corrected with the next release.
composer require dmhendricks/file-icon-vectors
(I know, it doesn't below on Packagist, but 15% of my downloads are coming from there, so some people must prefer it.)
To display a file icon, simply link to one or all of the icon set CSS files in the css
directory:
<link rel="stylesheet" href="https://github.com/dmhendricks/file-icon-vectors/blob/master/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://github.com/dmhendricks/file-icon-vectors/blob/master/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://github.com/dmhendricks/file-icon-vectors/blob/master/dist/file-icon-vivid.min.css" />
<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://github.com/dmhendricks/file-icon-vectors/blob/master/dist/file-icon-vectors.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css" />
<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vectors.min.css" />
jsDelivr allows you to combine multiple files. Below is an example of linking both the Vivid and Square Outline sets with one URI:
<link rel="stylesheet" href="https://github.com/dmhendricks/file-icon-vectors/blob/master//cdn.jsdelivr.net/combine/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css,npm/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />
This will become more beneficial with future releases that contain supplementary packs, web fonts, etc.
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css" />
<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-vectors.min.css" />
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-square-o.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" />
<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vectors.min.css" />
If you're using WordPress, you can load the icons by adding the following line to your theme's functions.php
file:
wp_enqueue_style( 'file-icon-vectors', 'https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/file-icon-vectors.min.css', null, null );
Each set has its own CSS prefix:
cla
- Classicviv
- Vividsqo
- Square OutlineThe format for CSS classes is fiv-[prefix]-[extension]
:
<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>
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>
Alternatively, 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>
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.
For example, fileicons.org reads this file to dynamically create the icon lists for both release and development versions.
Generic icons include blank.svg
, folder.svg
, image.svg
.
:rotating_light: BREAKING CHANGE: I will be removing the generic folder.svg
from each collection in favor of the upcoming "Extra" set. Follow this repo if you'd like to be notified when that happens.
Even though I'm paying for them, thanks also to Adobe, The Noun Project, FlatIcon, Icons8 and iconscout for providing great tools and services. :+1: :smile:
All icons used in the creation of this library were licensed MIT, Creative Commons (attribution) or purchased royalty-free. Any exceptions noted below. All logos are copyright their respective owners.
If you feel that you have a copyright issue, please feel free to report it.