2020-01-09 15:39:26 -06:00
[](https://www.danhendricks.com?utm_source=github.com& utm_medium=campaign& utm_content=button& utm_campaign=dmhendricks%2Ffile-icon-vectors)
[](https://raw.githubusercontent.com/dmhendricks/file-icon-vectors/master/LICENSE)
[](https://github.com/dmhendricks/file-icon-vectors/releases)
[](https://fileicons.org/?utm_source=github.com& utm_medium=referral& utm_content=button& utm_campaign=dmhendricks%2Ffile-icon-vectors)
2020-01-09 15:43:05 -06:00
[](https://github.com/dmhendricks/file-icon-vectors/releases)
2020-01-09 15:39:26 -06:00
[](https://www.jsdelivr.com/package/npm/file-icon-vectors?utm_source=github.com& utm_medium=referral& utm_content=button& utm_campaign=dmhendricks%2Ffile-icon-vectors)
2017-09-17 12:19:39 -05:00
[](https://twitter.com/danielhendricks)
2020-01-09 15:39:26 -06:00
[](https://browserstack.com/?utm_source=github.com& utm_medium=referral& utm_content=link& utm_campaign=dmhendricks%2Ffile-icon-vectors)
2017-09-16 01:53:18 -05:00
2018-07-28 10:24:53 -05:00
# File Icon Images
2018-06-12 08:58:11 -05:00
2018-07-21 18:22:15 -05:00
A collection of file type/extension SVG icons, available free for use in your applications.
2018-06-12 08:58:11 -05:00
2018-06-12 10:58:36 -05:00
* Please post [feedback or issues ](https://github.com/dmhendricks/file-icon-vectors/issues ).
2018-07-18 19:27:27 -05:00
* I pay to license several of the icons used in these sets. [Donations ](https://paypal.me/danielhendricks ) are appreciated.
2018-06-12 10:54:06 -05:00
* :bulb: 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 ](https://github.com/dmhendricks/file-icon-vectors/issues )! My time is limited, but I will get to it eventually.
2018-07-21 18:22:15 -05:00
* :star: If you use these icons to create something cool, [tell me ](https://twitter.com/danielhendricks ) about it!
2018-06-12 08:58:11 -05:00
2018-09-20 19:04:33 -05:00
### :pushpin: Demo: [View Icons](https://fileicons.org/)
2017-09-27 15:51:34 -05:00
## Icon Sets
2018-07-21 18:22:15 -05:00
Currently, there are three icon sets in the `dist/icons` directory:
2017-09-27 15:51:34 -05:00
* **Classic** - An expansion of the Redboot [free-file-icons ](https://github.com/redbooth/free-file-icons ) designs.
2018-07-21 09:44:26 -05:00
* **Vivid** - Inspired by [Erlen Masson ](https://www.sketchappsources.com/svg-resource/1856-vector-file-type-icons-sketch-freebie-resource.html?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-06-19 05:07:24 -05:00
* **Square Outline** (in progress) - Modified from and inspired by [Cotne Nazarashvili ](https://github.com/thecotne/square-file-icons )
2018-06-19 03:02:01 -05:00
2018-10-21 13:39:10 -05:00
**Next release:**
- Over 500 new icons
- A new set for dark backgrounds ([preview ](https://fileicons.org/?branch=develop&view=high-contrast ))
- CDNJS hosting
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.
2017-09-27 10:27:29 -05:00
## Installation
2018-09-28 14:58:45 -05:00
### NPM
2018-01-28 16:22:31 -06:00
2018-06-12 08:49:17 -05:00
```bash
npm install file-icon-vectors
2018-01-28 16:22:31 -06:00
```
2018-06-12 08:49:17 -05:00
2018-09-28 14:58:45 -05:00
### Bower
2018-06-12 08:49:17 -05:00
```bash
2018-01-28 16:22:31 -06:00
bower install file-icon-vectors
```
2018-10-21 13:39:10 -05:00
: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.
2018-09-28 14:55:58 -05:00
2018-09-28 14:58:45 -05:00
### Composer
2017-09-27 10:27:29 -05:00
2018-06-12 08:49:17 -05:00
```bash
2017-09-27 10:27:29 -05:00
composer require dmhendricks/file-icon-vectors
```
2018-10-21 13:39:10 -05:00
(I know, it doesn't below on Packagist, but 15% of my downloads are coming from there, so some people must prefer it.)
2018-09-20 19:01:39 -05:00
## Quick Start
2017-09-06 19:49:11 -05:00
2018-07-28 10:24:53 -05:00
To display a file icon, simply link to one or all of the icon set CSS files in the `css` directory:
2017-09-23 02:18:06 -05:00
2018-06-12 09:13:42 -05:00
```html
2018-01-28 20:48:20 -06:00
< link rel = "stylesheet" href = "dist/file-icon-classic.min.css" / >
2018-08-04 09:26:46 -05:00
< link rel = "stylesheet" href = "dist/file-icon-square-o.min.css" / >
2018-01-28 20:48:20 -06:00
< link rel = "stylesheet" href = "dist/file-icon-vivid.min.css" / >
2018-07-28 10:24:53 -05:00
<!-- Alternatively, you can load all sets: -->
< link rel = "stylesheet" href = "dist/file-icon-vectors.min.css" / >
2017-09-23 02:18:06 -05:00
```
2018-09-28 14:58:45 -05:00
### CDN: jsDelivr
2018-07-18 17:38:44 -05:00
2018-06-12 09:13:42 -05:00
```html
2018-09-20 19:01:39 -05:00
< 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" />
2018-08-04 09:26:46 -05:00
<!-- Alternatively, you can load all sets: -->
2018-09-20 19:01:39 -05:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/file-icon-vectors @1 .0.0/dist/file-icon-vectors.min.css" />
2017-09-23 02:18:06 -05:00
```
2018-06-12 09:13:42 -05:00
2018-09-28 14:58:45 -05:00
#### Combining Files
2018-09-28 14:55:58 -05:00
jsDelivr allows you to [combine ](https://www.jsdelivr.com/features#combine ) multiple files. Below is an example of linking both the Vivid and Square Outline sets with one URI:
```html
< link rel = "stylesheet" href = "//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.
2018-09-28 14:58:45 -05:00
### CDN: unpkg
2018-06-12 10:54:06 -05:00
2018-06-12 10:23:22 -05:00
```html
2018-09-20 19:01:39 -05:00
< 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" />
2018-08-04 09:26:46 -05:00
<!-- Alternatively, you can load all sets: -->
2018-09-20 19:01:39 -05:00
< link rel = "stylesheet" href = "https://unpkg.com/file-icon-vectors @1 .0.0/dist/file-icon-vectors.min.css" />
2018-06-12 10:23:22 -05:00
```
2018-09-28 14:58:45 -05:00
### CDN: GitHack
2018-07-18 17:13:28 -05:00
2018-07-18 17:38:44 -05:00
Supports branches as endpoints (such as `master` ).
2018-06-12 10:35:48 -05:00
```html
2018-07-18 17:13:28 -05:00
< link rel = "stylesheet" href = "https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-classic.min.css" / >
2018-07-28 10:24:53 -05:00
< link rel = "stylesheet" href = "https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-square-o.min.css" / >
2018-07-18 17:13:28 -05:00
< link rel = "stylesheet" href = "https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" / >
2018-07-28 10:24:53 -05:00
<!-- Alternatively, you can load all sets: -->
2018-08-04 23:17:49 -05:00
< link rel = "stylesheet" href = "https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vectors.min.css" / >
```
2018-09-28 14:58:45 -05:00
### WordPress
2018-08-04 23:17:49 -05:00
If you're using WordPress, you can load the icons by adding the following line to your theme's `functions.php` file:
```php
2018-09-20 19:01:39 -05:00
wp_enqueue_style( 'file-icon-vectors', 'https://cdn.jsdelivr.net/npm/file-icon-vectors@1 .0.0/file-icon-vectors.min.css', null, null );
2018-06-12 10:35:48 -05:00
```
2018-07-18 20:35:43 -05:00
## Usage
2018-06-12 10:23:22 -05:00
2018-07-18 20:35:43 -05:00
Each set has its own CSS prefix:
- `cla` - Classic
- `viv` - Vivid
- `sqo` - Square Outline
2018-09-20 19:01:39 -05:00
The format for CSS classes is `fiv-[prefix]-[extension]` :
2018-06-12 09:13:42 -05:00
```html
2017-09-23 02:18:06 -05:00
< 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 >
2018-06-23 11:25:26 -05:00
< span class = "fiv-sqo fiv-icon-doc" > < / span >
2017-09-23 02:18:06 -05:00
```
If you want to override the size of the icons, you can do so with CSS:
2018-06-12 09:13:42 -05:00
```html
2017-09-23 02:18:06 -05:00
< style >
2018-06-23 11:25:26 -05:00
.fiv-cla, .fiv-viv, .fiv-sqo { font-size: 3em; }
2017-09-23 02:18:06 -05:00
< / style >
```
2018-09-20 19:01:39 -05:00
Alternatively, you may also use `.fiv-size-md` , `.fiv-size-lg` and `.fiv-size-xl` to modify the icon sizes:
2017-09-24 00:10:15 -05:00
2018-06-12 09:13:42 -05:00
```html
2017-09-24 00:10:15 -05:00
< span class = "fiv-viv fiv-icon-pdf fiv-size-lg" > < / span >
```
2018-07-18 17:13:28 -05:00
## 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.
2018-09-28 14:55:58 -05:00
For example, [fileicons.org ](https://fileicons.org/ ) reads this file to dynamically create the icon lists for both release and development versions.
2018-07-18 19:46:33 -05:00
Generic icons include `blank.svg` , `folder.svg` , `image.svg` .
2018-10-21 13:39:10 -05:00
:rotating_light: **BREAKING CHANGE:** I will be removing the generic `folder.svg` from each collection in favor of the upcoming ["Extra" ](https://fileicons.org/?branch=develop&view=extra ) set. Follow this repo if you'd like to be notified when that happens.
2018-08-04 23:17:49 -05:00
2018-06-23 11:25:26 -05:00
## Special Thanks
2017-09-23 02:18:06 -05:00
2018-09-28 14:55:58 -05:00
- [jsDelivr ](https://www.jsdelivr.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [GitHack ](https://raw.githack.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), and [unpkg ](https://unpkg.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-08-05 15:19:58 -05:00
- [The File Extensions Database ](https://fileinfo.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) and [Share Icon ](https://www.shareicon.net/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-08-04 23:17:49 -05:00
- [SVG Optimizer ](https://github.com/svg/svgo/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [imagemin ](https://github.com/imagemin/imagemin/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) and [SVGOMG ](https://jakearchibald.github.io/svgomg/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-21 09:44:26 -05:00
- [Gulp ](https://gulpjs.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) and [Sass ](https://sass-lang.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-28 10:24:53 -05:00
- [Markdown Editor ](https://jbt.github.io/markdown-editor/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) by James Taylor
2018-06-23 11:37:08 -05:00
2018-09-28 14:55:58 -05:00
Even though I'm paying for them, thanks also to [Adobe ](https://www.adobe.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [The Noun Project ](https://thenounproject.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [FlatIcon ](https://www.flaticon.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [Icons8 ](https://icons8.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) and [iconscout ](https://iconscout.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) for providing great tools and services. :+1: :smile:
2018-06-23 12:24:49 -05:00
2018-09-20 19:01:39 -05:00
[](https://ga-beacon.appspot.com/?utm_source=github.com& utm_medium=campaign& utm_content=button& utm_campaign=dmhendricks%2Ffile-icon-vectors)
2017-09-16 00:26:09 -05:00
2017-09-23 23:48:27 -05:00
## Legal Stuff
2018-07-28 10:24:53 -05:00
All icons used in the creation of this library were licensed MIT, Creative Commons ([attribution ](#attribution )) or purchased royalty-free. Any exceptions noted below. All logos are copyright their respective owners.
2017-09-27 15:51:34 -05:00
2018-09-20 19:01:39 -05:00
If you feel that you have a copyright issue, please feel free to [report it ](https://github.com/dmhendricks/file-icon-vectors/issues ).
2017-09-27 15:51:34 -05:00
2017-09-24 15:53:01 -05:00
### Attribution
2017-09-22 20:41:04 -05:00
2018-07-21 09:44:26 -05:00
* [Android ](https://www.flaticon.com/free-icon/android-logo_61120?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icon provided by [Google ](https://www.flaticon.com/authors/google?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) via [flaticon.com ](https://www.flaticon.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-08-12 13:09:21 -05:00
* [Apple ](https://github.com/simple-icons/simple-icons/blob/develop/icons/apple.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [Debian ](https://github.com/simple-icons/simple-icons/blob/develop/icons/debian.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [Internet Explorer ](https://github.com/simple-icons/simple-icons/blob/develop/icons/internetexplorer.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icons provided by [Simple Icons ](https://simpleicons.org/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-28 10:24:53 -05:00
* [Adobe Flash ](https://github.com/vscode-icons/vscode-icons/blob/master/icons/file_type_flash.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icon provided by [vscode-icons ](https://github.com/vscode-icons/vscode-icons/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-21 18:22:15 -05:00
* [QuickTime ](https://www.flaticon.com/free-icon/quicktime_732104?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [Chrome ](https://www.flaticon.com/free-icon/chrome_732205?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) and [Firefox ](https://www.flaticon.com/free-icon/firefox_732023?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icons provided by [Pixel Perfect ](https://www.flaticon.com/authors/pixel-perfect?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) via [flaticon.com ](https://www.flaticon.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-08-12 13:09:21 -05:00
* [.NET ](https://github.com/konpa/devicon/blob/master/icons/dot-net/dot-net-original.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [CoffeeScript ](https://github.com/konpa/devicon/blob/master/icons/coffeescript/coffeescript-original.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [Git ](https://github.com/konpa/devicon/blob/master/icons/git/git-plain.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ), [RedHat ](https://github.com/konpa/devicon/blob/master/icons/redhat/redhat-plain.svg?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icons provided by [Devicon ](http://konpa.github.io/devicon/ )
2018-08-05 15:19:58 -05:00
* [Nintendo Switch ](https://www.flaticon.com/free-icon/nintendo-switch_871377?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icon provided by [flaticon.com ](https://www.flaticon.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-21 09:44:26 -05:00
* [BitTorrent ](http://www.icons101.com/icon/id_73504/setid_2388/Minimalist_Black_Icons__WIP_by_noshery/bittorrent?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icon provided by [noshery ](http://www.icons101.com/artist/id_2388/noshery ) from [icons101.com ](http://www.icons101.com/?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-09-28 14:55:58 -05:00
* [GIMP ](https://icons8.com/icon/39867/gimp ), [PowerShell ](https://icons8.com/icon/59499/powershell ) icons provided by [Icons8 LLC ](https://icons8.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-21 09:44:26 -05:00
* [Sass ](https://www.onlinewebfonts.com/icon/411905 ), [Globe ](https://www.onlinewebfonts.com/icon/336552 ) icons provided by [oNline Web Fonts ](http://www.onlinewebfonts.com?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
* Classic set [Folder Icon ](https://www.iconfinder.com/icons/173016/close_folder_icon ) made by [Snip Master ](https://www.iconfinder.com/snipicons ) from [Iconfinder ](https://www.iconfinder.com?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-10-20 23:44:35 -05:00
* [GNU ](https://commons.wikimedia.org/wiki/File:Gnu-head-30-years-anniversary.svg ) icon from [Be..anyone ](https://commons.wikimedia.org/wiki/User:Be..anyone ) at [Wikimedia Commons ](https://commons.wikimedia.org/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
* [Classic Windows ](https://commons.wikimedia.org/wiki/File:Microsoft_Logo_Wingdings_Font.svg ) icon from [Wdwdbot ](https://commons.wikimedia.org/wiki/User:Wdwdbot ) at [Wikimedia Commons ](https://commons.wikimedia.org/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-07-21 10:14:15 -05:00
* [Maven ](https://www.onlinewebfonts.com/icon/161017?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors ) icon provided by [OnlineWebFonts ](https://www.onlinewebfonts.com/?utm_source=github.com&utm_medium=referral&utm_content=link&utm_campaign=dmhendricks%2Ffile-icon-vectors )
2018-06-12 08:32:49 -05:00
2018-07-28 10:24:53 -05:00
## Screenshot
2018-06-12 08:32:49 -05:00
2018-09-20 19:01:39 -05:00
