The Document Library Pro plugin comes with several built-in icons: the file type icons, the document download icon, and a preview icon. This article explains how to replace these icons with your own.

Please note that these instructions are aimed at developers. If you don't know how to follow the instructions then we recommend asking your developer or posting a job on Codeable:

All icons in Document Library Pro are stored as SVG strings in the SVG_Icon class.

You can replace icons via the following two filters:

• document_library_pro_icon_svg- passes a keyed array of all the SVG icon strings.
• document_library_pro_file_type_icon_map - array indicating which icon should be shown for each specific file type.

Replacing the file type icons

You can replace the image for a file type group (e.g. 'image') by using the document_library_pro_icon_svg filter and replacing the SVG for the 'image' icon as seen in the code snippet below.

Note that {Your SVG string here} should be replaced with an actual SVG. Depending on the viewbox of your SVG you may also need additional styling to achieve the correct size for you layouts.

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['image'] = '{Your SVG string here}';
    
    return $svg_array;
} );

If you'd like to add a new specific file type icon you can alter the file type icon map using document_library_pro_file_type_icon_map.

In the code below we add a new icon type mov for the file type mov. You can find the default mappings below or view it directly in the SVG_Icon class from the plugin.

add_filter( 'document_library_pro_icon_svg', function( $icon_map ) { 
    $icon_map['mov'] = 'mov';
    
    return $icon_map;
} );

Then add the new mov icon type and icon to the SVG array as follows:

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['mov'] = '{Your SVG string here}';
    
    return $svg_array;
} );

Replacing the download icon

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['download'] = '{Your SVG string here}';
    
    return $svg_array;
} );

Replacing the preview icon

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['download'] = '{Your SVG string here}';
    
    return $svg_array;
} );

File type icon map

File Extension => Icon Name
// External
'www'       => 'www'
'external'  => 'www'
// Image formats.
'jpg'       => 'jpg'
'jpeg'      => 'jpg'
'jpe'       => 'jpg'
'gif'       => 'image'
'png'       => 'png'
'bmp'       => 'image'
'tiff'      => 'image'
'tif'       => 'image'
'ico'       => 'image'
'heic'      => 'image'
'psd'       => 'psd'
// Video formats.
'asf'       => 'video'
'asx'       => 'video'
'wmv'       => 'video'
'wmx'       => 'video'
'wm'        => 'video'
'avi'       => 'avi'
'divx'      => 'video'
'flv'       => 'video'
'mov'       => 'video'
'qt'        => 'video'
'mpeg'      => 'mp4'
'mpg'       => 'mp4'
'mpe'       => 'mp4'
'mp4'       => 'mp4'
'm4v'       => 'video'
'ogv'       => 'video'
'webm'      => 'video'
'mkv'       => 'video'
'3gp'       => 'video' // Can also be audio.
'3gpp'      => 'video' // Can also be audio.
'3g2'       => 'video' // Can also be audio.
'3gp2'      => 'video' // Can also be audio.
// Text formats.
'txt'       => 'txt'
'asc'       => 'default'
'c'         => 'default'
'cc'        => 'default'
'h'         => 'default'
'srt'       => 'default'
'css'       => 'css'
'htm'       => 'html'
'html'      => 'html'
'vtt'       => 'default'
'dfxp'      => 'default'
'rtf'       => 'rtf'
'js'        => 'js'
'swf'       => 'default'
'class'     => 'default'
// Audio formats.
'mp3'       => 'mp3'
'm4a'       => 'audio'
'm4b'       => 'audio'
'aac'       => 'audio'
'ra'        => 'audio'
'ram'       => 'audio'
'wav'       => 'audio'
'ogg'       => 'audio'
'oga'       => 'audio'
'flac'      => 'audio'
'mid'       => 'audio'
'midi'      => 'audio'
'wma'       => 'audio'
'wax'       => 'audio'
'mka'       => 'audio'
// PDF
'pdf'       => 'pdf'
'xps'       => 'pdf'
'oxps'      => 'pdf'
// Calendar
'ics'       => 'default'
// Archives
'tar'       => 'archive'
'zip'       => 'archive'
'gzip'      => 'archive'
'gz'        => 'archive'
'rar'       => 'archive'
'7z'        => 'archive'
'exe'       => 'exe'
'xcf'       => 'archive'
// Word Processor
'doc'       => 'word'
'wri'       => 'word'
'docx'      => 'word'
'docm'      => 'word'
'dotx'      => 'word'
'dotm'      => 'word'
'wp'        => 'word'
'wpd'       => 'word'
'pages'     => 'word'
'odt'       => 'word'
'rtx'       => 'word'
'onetoc'    => 'word'
'onetoc2'   => 'word'
'onetmp'    => 'word'
'onepkg'    => 'word'
// Presentation
'pot'       => 'presentation'
'pps'       => 'presentation'
'ppt'       => 'presentation'
'pptx'      => 'presentation'
'pptm'      => 'presentation'
'ppsx'      => 'presentation'
'ppsm'      => 'presentation'
'potx'      => 'presentation'
'potm'      => 'presentation'
'ppam'      => 'presentation'
'sldx'      => 'presentation'
'sldm'      => 'presentation'
'key'       => 'presentation'
'odp'       => 'presentation'
'odc'       => 'presentation'
'odg'       => 'presentation'
// Spreadsheet
'xla'       => 'spreadsheet'
'xls'       => 'spreadsheet'
'xlt'       => 'spreadsheet'
'xlw'       => 'spreadsheet'
'xlsx'      => 'spreadsheet'
'xlsm'      => 'spreadsheet'
'xlsb'      => 'spreadsheet'
'xltx'      => 'spreadsheet'
'xltm'      => 'spreadsheet'
'xlam'      => 'spreadsheet'
'numbers'   => 'spreadsheet'
'ods'       => 'spreadsheet'
'odb'       => 'spreadsheet'
'odf'       => 'spreadsheet'
'mdb'       => 'spreadsheet'
'mpp'       => 'spreadsheet'
'csv'       => 'csv'
'tsv'       => 'spreadsheet'

Related Articles

• How to email subscribers when a new document is added
• How to collect a user's email address before downloading a file
• How to display ACF group fields
• How to export documents
• How to display the WordPress user who created the document
• Code snippet: Hide the download button for certain documents