Changing default folders icons

Steps to reproduce

Im installed custom theme from guide
All right, but I have trouble with folder icon. I see, my folder’s icon taken from path: /core/img/filetypes/folder.svg
If i trying create custom folder.svg icon on /apps/mynewtheme/core/img/filetypes folder, and create custom files.php(as original /apps/files/css/files.php exactly change path for taking:
.nav-icon-files {
background-image: url("/apps/mynewtheme/apps/files/img/folder.svg");
), anyway i see than my icon taken from path /core/img/filetypes/folder.svg. :expressionless:
I saw manual about changing icons for filetypes, but i dont see what file i need change for customize my folders icon.

Earlier I tryed swap original file on path /core/img/filetypes and its work well, but i saw hash trouble message on admin panel, so i wanna to do proper installation without “botch”.

Expected behaviour

Changing default icons and path for that

Actual behaviour

Icons and path saved default

Server configuration

Operating system: Ububtu server 19.10

Web server: apache2

Database: Mariadb last

PHP version: 7+ last

ownCloud version:

**Updated from an older ownCloud or fresh install:**fresh install

Where did you install ownCloud from: offical site

Signing status (ownCloud 9.0 and above):

The content of config/config.php: dont need

Are you using external storage, if yes which one: no

Are you using encryption: yes

Eventually replace sensitive data as the name/IP-address of your LDAP server or groups.

### Client configuration
**Browser:** Last Chrome

Hello Nicky,

I don’t know exactly what you’re doing wrong but the way over the Files.php seems wrong to me.

What I would do is simply overwrite the icons with CSS. The changed folder image files should be under apps/YOURTHEME/core/img/filetypes. Then the following is written to the file apps/YOURTHEME/core/css/styles.css for the icon you wanted to replace according to the description.

    /* ------ Override folder icons */

    .thumbnail[style*="filetypes/folder.svg"] {
      background-image: url('../img/filetypes/folder.svg') !important;

Further icons can be exchanged in this way.

    .thumbnail[style*="filetypes/folder-external.svg"] {
      background-image: url('../img/filetypes/folder-external.svg') !important;

    .thumbnail[style*="filetypes/folder.svg"] {
      background-image: url('../img/filetypes/folder.svg') !important;

    .thumbnail[style*="filetypes/folder-stared.svg"] {
      background-image: url('../img/filetypes/folder-stared.svg') !important;

    .thumbnail[style*="filetypes/folder-shared.svg"] {
      background-image: url('../img/filetypes/folder-shared.svg') !important;

    .thumbnail[style*="filetypes/folder-public.svg"] {
      background-image: url('../img/filetypes/folder-public.svg') !important;

    .thumbnail[style*="filetypes/package-x-generic.svg"] {
      background-image: url('../img/filetypes/package-x-generic.svg') !important;

    .thumbnail[style*="filetypes/folder-windows.svg"] {
      background-image: url('../img/filetypes/folder-windows.svg') !important;

Don’t forget to empty the browser cache after exchanging graphics.


Dear cscherm,
Thanks for you answer. It more easy than i thought :smiley:
Regards, Nick.

1 Like