Iconic colors from content-type

Question

I have a web application that includes a file browser. I have a little database that associates a FontAwesome icon to a variety of content-types (i.e. images, word/lowriter files, excel/localc files, PDF, plain text, archives, etc.). I copy/paste here for completeness (it's TypeScript for use with React-FontAwesome):

const iconClasses: { [key: string]: IconDefinition } = {
      // Media
      "image": faFileImage,
      "audio": faFileAudio,
      "video": faFileVideo,
      // Documents
      "application/pdf": faFilePdf,
      "application/msword": faFileWord,
      "application/vnd.ms-word": faFileWord,
      "application/vnd.oasis.opendocument.text": faFileWord,
      "application/vnd.openxmlformats-officedocument.wordprocessingml":
      faFileWord,
      "application/vnd.ms-excel": faFileExcel,
      "application/vnd.openxmlformats-officedocument.spreadsheetml":
      faFileExcel,
      "application/vnd.oasis.opendocument.spreadsheet": faFileExcel,
      "application/vnd.ms-powerpoint": faFilePowerpoint,
      "application/vnd.openxmlformats-officedocument.presentationml":
      faFilePowerpoint,
      "application/vnd.oasis.opendocument.presentation": faFilePowerpoint,
      "text/plain": faFileAlt,
      "text/html": faFileCode,
      "application/json": faFileCode,
      // Archives
      "application/gzip": faFileArchive,
      "application/zip": faFileArchive
    };
    
    export function getFontAwesomeIconFromMIME(mimeType: string): IconDefinition {
      // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
    
      const candidate = Object.entries(iconClasses).find(([k]) =>
        mimeType.startsWith(k)
      )
    
      if (candidate === undefined) {
        return faFile;
      } else {
        return candidate[1];
      }
    
    }

However these icons are gray. I would like to associate an "iconic" color to icons (in RGB format). I'm not a UI guy, but it seems that these colors are somewhat standardized. For example, PDF icons are red, Word icons blue, Excel icons are green, archives are yellow, and so on.

Does one have such a list of iconic colors?

Answer 1

No standard for colors

I agree with RockPaperLz’s answer that there is no single standard for icon colors.

Should the colors be customizable?

For a file browser that is only a small part of a web application, I disagree with RockPaperLz that your app should allow the users to customize the icon colors. That would greatly complicate the app’s settings page, and I think it would provide little benefit: almost no one would spend time customizing a huge list of icons. Instead of making the user come up with the design, you, the designer, should choose good defaults.

See the blog post “Choosing our Preferences” for reasons you shouldn’t “just” make something a preference.

Sources of colors you can use

Even though there is no standard set of icon colors, that doesn’t mean you have to choose all the colors yourself. Let me direct you to the many Visual Studio Code extensions tagged “icon-theme”. Visual Studio Code is a code editor, so most of those icon sets are focused on icons for files containing code in a certain programming language, but I see some icons for other file types too.

Not only can you use those icon sets for inspiration, some of them have licenses that would allow you to copy the relevant icons into your app. For example, the “Simple icons” theme (see its catalog of icons) is released under the CC0 License. (I am not a lawyer, and cannot promise that those icons are legally safe to use.)

Advice on picking colors yourself

As well as getting inspiration from the above icon sets, you might have to pick some icon colors yourself. Some advice on that:

• The main goal: pick a set of icon colors that allows users to find the folder and the file they are looking for as quickly as possible in the context of your app. The types of files your users like to select might affect your choices.
  • For example, do users often look for a “text document” but can’t remember whether it was a Word document or an OpenOffice Writer document? Give those file types the same icon color. Do they often remember that they specifically wanted an OpenOffice Writer document, not a Word document? Give those files types different colors.
• As you wrote, if a file type has a de facto standard color, e.g. red for PDFs due to Adobe Reader using that color, choose that. The reason is that users are likely to have seen that color in other file pickers, and will be able to more quickly recognize that file.
• If you have enough file types to choose colors for (i.e., enough file types the users will have to distinguish), you probably won’t be able to make all the colors noticeably distinct from each other while still giving the colors enough contrast. Thus, I suggest giving similar file types colors that are close to each other on the color wheel.
  • For example, if the user will sometimes need to tell zip files from gzip files, and at other times will want to ignore all compressed files, give zip and gzip files different shades of brown. That way, the user can ignore all brown-ish colors when they aren’t looking for a compressed file.

Answer 2

No industry standards exist for icon colours as a way to indicate what type of content they contain.

As you noted, there are a few popular applications that use specific colours. For example, Adobe uses red for PDF icons, and Microsoft uses green for Excel documents. But these are arbitrary assignments, and are dependent on the presence of proprietary closed-sourced applications. They also do not work in the context of accessibility, due to a certain type of colour-blindness that precludes some users from being able to discern the difference between such colours.

As an example of variation within the industry, another popular PDF application, the open-source Sumatra PDF Reader, uses yellow for PDF icons.

For maximum flexibility, and to inclusively accommodate all users, I recommend allowing users to specify the colour of icons presented to them.

Update:

The OP added more details and indicated that this is a minor part of the application and therefore their client will not pay to include flexibility in this part of the UI (which makes good sense).

In this case, I would keep it real simple: 1 colour for folders and another colour for files. Keep in mind accessibility guidelines when choosing those 2 colours.

If you add arbitrary colours beyond that, the user will be left to wonder if the colours have meaning; likely, they will have no quick and easy way to make that determination besides reading the documentation. Better to keep things simple, and not confuse them in the first place.