file-icon-vectors

by dmhendricks

dmhendricks /file-icon-vectors

A collection of file type icons in SVG format

149 Stars 16 Forks Last release: about 2 years ago (1.0) MIT License 397 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Author License Release Icon Count GitHub Downloads jsDelivr Hits Twitter BrowserStack

File Icon Images

A collection of file type/extension SVG icons, 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.
  • :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! My time is limited, but I will get to it eventually.
  • :star: If you use these icons to create something cool, tell me about it!

:pushpin: Demo: View Icons

Icon Sets

Currently, there are three icon sets in the

dist/icons
directory:

Next release:

  • Over 500 new icons
  • A new set for dark backgrounds (preview)
  • 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.

Installation

NPM

npm install file-icon-vectors

Bower

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

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.)

Quick Start

To display a file icon, simply link to one or all of the icon set CSS files in the

css
directory:



CDN: jsDelivr




Combining Files

jsDelivr allows you to combine multiple files. Below is an example of linking both the Vivid and Square Outline sets with one URI:


This will become more beneficial with future releases that contain supplementary packs, web fonts, etc.

CDN: unpkg




CDN: GitHack

Supports branches as endpoints (such as

master
).



WordPress

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/[email protected]/file-icon-vectors.min.css', null, null );

Usage

Each set has its own CSS prefix:

  • cla
    - Classic
  • viv
    - Vivid
  • sqo
    - Square Outline

The format for CSS classes is

fiv-[prefix]-[extension]
:





If you want to override the size of the icons, you can do so with CSS:


Alternatively, you may also use

.fiv-size-md
,
.fiv-size-lg
and
.fiv-size-xl
to modify the icon sizes:

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.

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.

Special Thanks

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:

Analytics

Legal Stuff

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.

Attribution

Screenshot

Icon Samples

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.