square-file-icons

flat square file icons

Usage no npm install needed!

<script type="module">
  import squareFileIcons from 'https://cdn.skypack.dev/square-file-icons';
</script>

README

square file icons

install with bower or npm

bower install --save square-file-icons

npm install --save square-file-icons

don't want to download?

use rawgit.com CDN this way you don't need to download anything just add link tag to head of html

that points to latest version

<link href="https://cdn.rawgit.com/thecotne/square-file-icons/master/dist/css/square-file.min.css" rel="stylesheet">

or link with tag of version

<link href="https://cdn.rawgit.com/thecotne/square-file-icons/<version number>/dist/css/square-file.min.css" rel="stylesheet">

this is a free service, so there are no uptime or support guarantees.

how to use

make span or i tag

add class sf and another class to specify icon like this

<span class="sf sf-pdf"></span>

you can change icon color from css color property like this

<span class="sf sf-5x sf-pdf" style="color: #EA4C3A"></span>

or use sf-colorful class

<span class="sf sf-5x sf-colorful sf-pdf"></span>

you can also toggle class with sf-hover see html example for end result

list of icons

File Type Preview Class Name Preview Class Name
Excel sf-excel-o sf-excel
Image sf-image-o sf-image
PDF sf-pdf-o sf-pdf
PowerPoint sf-powerpoint-o sf-powerpoint
Text sf-text-o sf-text
Word sf-word-o sf-word

find bug?

submit issue