file-icon-vectors

    1.0.0 • Public • Published

    Author Icon Count Release License GitHub Downloads NPM NPM Downloads Twitter

    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!

    Icon Sets

    Currently, there are three icon sets in the dist/icons directory:

    📌 Demo: View Icon Sets

    Installation

    NPM

    npm install file-icon-vectors

    Bower

    bower install file-icon-vectors

    Composer

    composer require dmhendricks/file-icon-vectors

    Linking Stylesheets

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

    For releases:

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

    CDN: jsDelivr

    Supports both HTTP and HTTPS.

    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors@1.0/dist/file-icon-classic.min.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors@1.0/dist/file-icon-square-o.min.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors@1.0/dist/file-icon-vivid.min.css" />
     
    <!-- Alternatively, you can load all sets: -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors@1.0/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', '//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors@1.0/dist/file-icon-vectors.min.css', null, null );

    Usage

    Each set has its own CSS prefix:

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

    Examples:

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

    Notice that the classes contain either flv-cla for the Classic set, flv-viv for the Vivid set, etc.

    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> 

    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>

    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.

    Generic icons include blank.svg, folder.svg, image.svg.

    Special Thanks

    Even though I'm paying for them, thanks also to Adobe, The Noun Project and FlatIcon 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 post it.

    Attribution

    Screenshot

    Sample of Collections

    Install

    npm i file-icon-vectors

    DownloadsWeekly Downloads

    10,660

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.76 MB

    Total Files

    1121

    Last publish

    Collaborators

    • dmhendricks