Check documentation for the latest version of dhtmlxSuite Customizing Icons DHTMLX Docs

Customizing Icons

This documentation is for Vault v2.5. Please go to to see documentation for the current version of dhtmlxVault.

Default icons

  • Icons are stored in the icons object.
  • By default, vault provides icons for a number of extensions.
  • Similar files extensions are combined into groups, for example: group "icon_image" contains jpg,gif,png... extensions and for all these extensions in the group, vault will use the same icon.
  • You can alter any existing group and create new ones.
  • For all other extensions default icon used.
Group Icon Extensions
icon_image jpg, jpeg, gif, png, bmp, tiff, pcx, svg, ico
icon_psd psd
icon_video avi, mpg, mpeg, rm, move, mov, mkv, flv, f4v, mp4, 3gp
icon_audio wav, aiff, au, mp3, aac, wma, ogg, flac, ape, wv, m4a, mid, midi
icon_arch rar, zip, tar, tgz, arj, gzip, bzip2, 7z, ace, apk, deb
icon_text txt, nfo, djvu, xml
icon_html htm, html
icon_doc doc, docx, rtf, odt
icon_pdf pdf, ps
icon_xls xls
icon_exe exe
icon_dmg dmg
for all other formats default icon used

These icons are licensed under a Creative Commons Attribution 3.0 License,

Custom icons through prototype

  1. Change existing group (add new icons, remove the current ones)
    Changes will affect all vault instances, call before init:
    // remove existing group
    dhtmlXVaultObject.prototype.icons.icon_image = [];
    // alter existing group (remove several icons or add new ones)
    dhtmlXVaultObject.prototype.icons.icon_image = ["jpg","png","bmp"];
    // add new group
    dhtmlXVaultObject.prototype.icons.icon_iso = ["iso","nrg"];
    // change default icon
    dhtmlXVaultObject.prototype.icon_def = "other_def_icon";
  2. To change icons for existing groups you need to add css rule
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_group_name div.dhx_vault_all_icons:
    .dhx_vault_dhx_skyblue div.dhx_vault_files 
    div.dhx_vault_file_icon.dhx_vault_icon_image div.dhx_vault_all_icons {
        background-image: url("path_to_file/icon_custom.gif");
        width: 32px;
        height: 32px;
  3. For new groups you also need to add new css rule
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_group_name div.dhx_vault_all_icons:
    .dhx_vault_dhx_skyblue div.dhx_vault_files 
    div.dhx_vault_file_icon.dhx_vault_icon_iso div.dhx_vault_all_icons {
        background-image: url("path_to_file/icon_iso.gif");
        width: 32px;
        height: 32px;
  4. For default icon you can change css only. Pay attention: if you change the default icon css name, you need to use it in css as well:
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_icon_def div.dhx_vault_all_icons
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_icon_def
    div.dhx_vault_all_icons {
        background-image: url("path_to_file/other_def_icon.gif");
        width: 32px;
        height: 32px;

Custom icons for existing instance

  • After init vault has a key in the icons collection where ext-group pairs are exist
  • Default icon located in conf.icon_def
  • To change group you need to remove the key, add new pair or exit existing
  • All new groups required css altering (please see examples for css above)
// init vault
var myVault = new dhtmlXVaultObject({...});
// remove several icons (i.e. default icon will used for them)
delete myVault.conf.icons.txt;
delete myVault.conf.icons.jpg;
delete myVault.conf.icons.png;
// change group for existing extension or add new extension
myVault.conf.icons.txt = "custom_icon";
myVault.conf.icons.iso = "group_iso";
// change default icon
myVault.conf.icon_def = "other_def_icon";

Custom icons for uploading and errors

css for uploading

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_uploading div.dhx_vault_file_icon div.dhx_vault_all_icons

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_uploading 
div.dhx_vault_file_icon div.dhx_vault_all_icons {
    background-image: url("icon_loading.gif");
    width: 32px;
    height: 32px;
    left: 0px;

css for errors

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_fail div.dhx_vault_file_icon div.dhx_vault_all_icons

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_fail
div.dhx_vault_file_icon div.dhx_vault_all_icons {
    background-image: url("icon_error.gif");
    width: 32px;
    height: 32px;
    left: 0px;
Back to top