Automatic File Icons

Show icons in front of folders and files in the file explorer: open and closed folders, notes and all other files each get their own icon. Choose colors for dark or light themes, use your accent color, or pick your own.

Features

• Folder icons: closed folders show a folder, expanded folders an open folder.
• Note icons: Markdown notes show a page with a folded corner.
• Other file icons: all other files, such as PDF, canvas, images or scripts, show a page with a code symbol.
• Color modes: colors tuned for dark or light themes, switching with the theme automatically, your accent color, or custom colors.
• Works with Colored File Names: folders colored with the Colored File Names plugin show their icon in that color.
• Lightweight: no changes to the file explorer itself, the icons are drawn with CSS only.

Settings

Icons

Setting	Description
Folders	Show a folder icon in front of folders.
Open folders	Show an open folder icon for expanded folders. When off, all folders use the closed icon.
Notes	Show a page icon in front of Markdown notes.
Other files	Show a code icon in front of all other files.

Colors

Color mode	Description
Match theme	Colors for dark or light themes, depending on the current theme.
Dark theme	Always use the colors for dark themes.
Light theme	Always use the colors for light themes.
Accent color	Folders in the accent color, files in a lighter shade of it.
Custom colors	Pick a color for folders, notes and other files.

Setting	Description
Colors from Colored File Names	Folders colored with the Colored File Names plugin show their icon in that color instead of the folder color. On by default.

Styling with CSS snippets

The colors are available as --afi-folder-color, --afi-note-color and --afi-file-color, the icon size and the gap to the name as --afi-icon-size and --afi-icon-gap:

body {
  --afi-icon-size: 1.25em;
}

Credits

Icon shapes from Lucide, ISC license.