dmhendricks/file-icon-vectors dmhendricks/file-icon-vectors

  • Stars
    star
    253
  • Rank 160,776 (Top 4 %)
  • Language
    CSS
  • License
    MIT License
  • Created about 7 years ago
  • Updated almost 3 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
dmhendricks/file-icon-vectors
github

dmhendricks

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A collection of file type icons in SVG format

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.
  • 💡 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 these icons to create something cool, tell me about it!

📌 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

🚨 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:

<link rel="stylesheet" href="dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="dist/file-icon-vectors.min.css" />

CDN: jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/file-icon-vectors.min.css" />

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:

<link rel="stylesheet" href="//cdn.jsdelivr.net/combine/npm/[email protected]/dist/file-icon-vivid.min.css,npm/[email protected]/dist/file-icon-square-o.min.css" />

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

CDN: unpkg

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/file-icon-vectors.min.css" />

CDN: GitHack

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

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]:

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

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.

🚨 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. 👍 😄

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

More Repositories

1

bootstrap-grid-css

The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.
CSS
159
star
2

wordpress-base-plugin

A starter template for WordPress plugins, with autoloading, namespaces and object caching (where available).
PHP
84
star
3

wordpress-output-buffering

A simple mu-plugin that buffers the entire WP process, capturing the final output for DOM manipulation.
PHP
17
star
4

wordpress-toolkit

A collection of helper classes and functions for WordPress plugins and themes.
PHP
14
star
5

signature-social-icons

Social media icons for your e-mail signatures.
HTML
9
star
6

jquery-modallink

A simple jQuery plugin to display any external links into a modal popup via iframe.
JavaScript
5
star
7

wordpress-network-subdomain-updater-plugin

A WordPress mu-plugin that updates network (multisite) sub-domains after MySQL data import.
PHP
4
star
8

carbon-fields-loader

[DEPRECATED] A WordPress plugin that loads the Carbon Fields framework.
PHP
4
star
9

php-combine-scripts

A simple PHP script example to combine and minify multiple JS or CSS files passed via URI
PHP
4
star
10

carbon-field-select-multiple

A custom multiple select field for Carbon Fields with optional Select2 support.
JavaScript
3
star
11

docker-socketio-relay

Dockerfile for a simple Node.js server to relay messages to Socket.IO clients.
HTML
3
star
12

woocommerce-order-progress

A WooCommerce plugin to display an order progress bar on a customer's order details page.
PHP
3
star
13

wordpress-restrict-by-ip-plugin

A WordPress plugin to restrict access to site(s), pages and/or content access by IP address or subnet mask.
PHP
2
star
14

hash-int

A PHP class to generate an alphanumeric hash of specified length from an integer.
PHP
2
star
15

detect-remote-device

A WordPress plugin that adds additional functions and shortcodes to modify output by device type - mobile, tablet or desktop.
PHP
2
star
16

nodejs-simple-message-relay

A simple Node.js server to relay messages and data to listening Socket.IO clients.
JavaScript
2
star
17

dashicons-extended

[WORK IN PROGRESS] A collection of icons intended to be a drop-in replacement that extends the dashicons library in WordPress.
CSS
2
star
18

wordpress-whmcs-licensing-example-plugin

An example plugin for validating license keys via the WHMCS Licensing Addon
PHP
2
star
19

page-analysis-tab-rank-math

An add-on for the Rank Math WordPress plugin that moves On-Page Analysis from the General tab to its own (Classic Editor).
PHP
2
star
20

dev-favicons

Favicons and app icons intended to be perceptible for different development environments.
1
star
21

dmhendricks.github.io

GitHub-hosted demo and documentation pages for projects by Daniel M. Hendricks
1
star
22

wordpress-lazy-loading-attribute-plugin

A WordPress plugin that adds Chrome's lazy loading attribute to images and iframes within post content
PHP
1
star
23

jquery-waituntilexists

jQuery plugin that runs handler function once specified element is inserted into the DOM.
JavaScript
1
star
24

wordpress-mu-common-toolkit

A must use (MU) plugin for WordPress that contains helper functions, snippets and a configuration registry.
PHP
1
star
25

wordpress-rewrite-content-urls-plugin

This plugin allows you to rewrite URLs in WordPress content, primarily created for developers sync'ing data from production to local development.
PHP
1
star