Pure CSS icons for popular file extensions
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
build update version 0.0.7 Jan 14, 2019
src update version 0.0.7 Jan 14, 2019
package-lock.json update version 0.0.7 Jan 14, 2019
package.json update version 0.0.7 Jan 14, 2019
webpack.common.config.js init icons repo Nov 14, 2018
webpack.dev.config.js update docs Jan 14, 2019


CSS file icons

Backers on Open Collective Sponsors on Open Collective

Pure CSS file icons for popular extensions


CSS file icons



Include css-file-icons.css to html or install via npm

npm i css-file-icons --save

include css file css-file-icons.css from folder build


<div class="fi fi-doc">
    <div class="fi-content">doc</div>

File extensions

Icons for files doc, docx, log, txt, wps, csv, dat, ppt, xml, mp3, wav, avi, mov, mp4, 3ds, max, gif, ai, svg, pdf, xls, xlsx, sql, exe, js, html, xhtml, css, asp, ttf, dll, 7z, zip, c, cs, java, swift, torrent, php, hh, go, py, rss, rb.

// where *extension* = file extension.
// example: .fi.fi-doc


.fi.fi-size-sm // default

SCSS Mixins

New icon color

@mixin fi-color($class, $color, $text_color:$file_icon_text_color)

Icon size

@mixin fi-size($class, $width, $height, $arrow_h, $font_size)


This project exists thanks to all the people who contribute.

Browsers support

CSS file icons supports all modern browsers (Chrome, Firefox, Opera and Internet Exploer >= 9)

Wordpress version

CSS File Icons WP


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]