Basic Usage

Using Filecons.js is extremely easy. First, you need to load filecons.js or filecons.min.js at the footer of your page, like so:


Then, simply create a canvas element with the CSS class file-icon and the attribute data-file-type. Here is an example of how to create a file icon with a .zip extension:

This will create the icon with the default size:

That’s it, you’re done!

Since Filecons.js is invoked immediately, there is no need to write extra code to explicitly invoke it. This is why the script must be loaded at the footer of document.

To create other file types, simply change the data-file-type attribute value to whatever extension you’d like.

Size Classes

There are 7 pre-built icon sizes to choose from. The following table lists all pre-built sizes and their dimensions:

CSS Class Dimensions Preview
file-icon-xxs 12×16
file-icon-xs 16×21
file-icon-s 24×32
file-icon-m 36×48
file-icon-x 48×64
file-icon-xl 64×85
file-icon-xxl 96×128

To use one of the pre-built size classes, simply add the class file-icon-{size} to the element’s class attribute. For example:

Custom Sizing

Alternately, if you don’t want to use one of the pre-built sizes, you could implement custom sizing by using the width and height attributes:

The height will be automatically calculated to preserve the default ratio. This how it will look:

If both the width and the height are specified, it is passible to change the ratio. For example, here is how to generate a wide icon:

File Extensions

There are (currently) 64 supported file types:

However, Filecons.js handles unsupported file types gracefully by rendering the default icon with the appropriate extension. For example, a file icon with an extension abc will be rendered like this:


Drawing folder icons can be done by setting dir as the file’s extension. For example:

Folder icons have 2 optional attributes:

  • data-dir-open – If set to true, the folder will be opened
  • data-dir-full – If set to true, the folder will be full

Here’s how you would create an open folder icon:

Here’s how you would create a folder icon with documents in it:

You can also combine the two:

Configuration Variable

You can change the default behavior of Filecons.js and add custom file definitions by using the configuration variable. To do that, simply create a variable named FileconsConfig and use the available parameters to override the defaults. Make sure the variable is defined before Filecons.js is loaded:


Available Parameters:

Parameter Type Value
defaultSize String One of the pre-built sizes, e.g. ‘xxs’
ratio Decimal (between 0 to 1) The default ratio between the icon’s width and height
cornerRadius Decimal (between 0 to 1) The size of the corner radius. 0 means no rounded corners.
foldedCorner Decimal (between 0 to 1) The size of the folded corner. 0 means no folded corner.
formats Object File formats definitions. Each must have a ‘color’ and a ‘symbol’ attribute. This can be used to create new file formats, or to override existing file formats. See list of available colors and symbols.

Available colors

  • red
  • pink
  • lightgreen
  • darkgreen
  • lightblue
  • darkblue
  • orange
  • yellow
  • gray

Available symbols (These are based on the beautiful icons designed by Freepik)

  • application
  • code
  • brush
  • database
  • film
  • earth
  • music
  • picture
  • pdf
  • text
  • zipper
  • ruby
  • chart
  • table

Dynamic Rendering

Introduced in v1.0.1

It is sometimes useful to be able to re-render the icons when the DOM has changed or when new elements have been dynamically created. In those cases you can use Filecons.render() to re-render the entire document or part of it (by providing a node or a query as an argument). For example:

// Renders .file-icon elements in the entire document

// By DOM Element
// Renders .file-icon elements in #MyDiv
Filecons.render( document.getElementById("#MyDiv" ) ); 

// By Query
// Renders .file-icon elements in #MyDiv
Filecons.render( "#MyDiv" ); 

Spread the word about Filecons.js!