forgejo-file-icons

File-type icons for Forgejo's repository file browser. Replaces the default monochrome octicons with colored SVG icons based on file extension and filename.

Note

This is a fork with some bugfix and nixos packaging.

What it does

Uses CSS attribute selectors on Forgejo's data-entryname attributes to swap file/folder icons with language-specific SVGs from vscode-great-icons and vscode-material-icon-theme.

Covers 1200+ SVG icons across hundreds of file extensions and filenames.

Installation

1. Copy icons to your Forgejo assets directory

cp -r icons/ /path/to/forgejo/custom/public/assets/icons/

2. Build and install the template

bash build.sh
cp templates/custom/header.tmpl /path/to/forgejo/custom/templates/custom/header.tmpl

3. Restart Forgejo

The icons will appear immediately in repository file listings.

Forgejo paths

Setup	Custom directory
Binary	$FORGEJO_WORK_DIR/custom/ or set via FORGEJO_CUSTOM
Docker	/data/gitea/ (mount as volume)
Cloudron	/app/data/custom/

Static assets go in custom/public/ and templates in custom/templates/.

Installation (NixOS)

The flake exposes packages.default (icons + generated header.tmpl, laid out to mirror Forgejo's custom dir) and nixosModules.default, which symlinks both into services.forgejo.customDir via systemd.tmpfiles.

{
  inputs.forgejo-file-icons.url = "github:js0ny/forgejo-file-icons";

  outputs = { nixpkgs, forgejo-file-icons, ... }: {
    nixosConfigurations.myhost = nixpkgs.lib.nixosSystem {
      modules = [
        forgejo-file-icons.nixosModules.default
        {
          services.forgejo.enable = true;
          services.forgejo-file-icons.enable = true;
        }
      ];
    };
  };
}

The CSS uses Forgejo's existing data-entryname attribute on table rows:

/* Match by extension */
tr.entry[data-entryname$=".rs" i] .octicon-file {
    background-image: url('/assets/icons/rust.svg');
}

/* Match by exact filename */
tr.entry[data-entryname="dockerfile" i] .octicon-file {
    background-image: url('/assets/icons/docker.svg');
}

The default octicon SVG paths are made transparent and a background-image is set on the SVG element itself.

The trailing i makes the match case-insensitive — upstream's mapping is all lowercase while the files on disk are Dockerfile, LICENSE, README.md.

Every rule has identical specificity, so document order decides the winner. The generator emits them in three tiers: extension rules ordered by suffix length (so .blade.php beats .php), then exact filenames last (so docker-compose.yml beats .yml).

Rebuilding from source

To regenerate icons and CSS from the upstream VS Code icon repos:

# Requires: git, python3
bash build-icons.sh

# Then rebuild the template
bash build.sh

build-icons.sh shallow-clones the icon repos, extracts SVGs, and generates css/file-icons.css using the extension mappings from vscode-great-icons.

Adding custom icons

Edit css/file-icons.css and add a rule:

/* myformat */
tr.entry[data-entryname$=".xyz" i] .octicon-file { background-image: url('/assets/icons/myicon.svg'); }

Note that css/file-icons.css is regenerated by build-icons.sh; to make an addition survive a rebuild, add it to EXTRA_FILE_NAMES in build-icons.py instead.

Place the SVG in icons/ and rebuild with bash build.sh.

License

Build scripts and CSS are MIT-licensed. SVG icons are redistributed from upstream projects under their own licenses:

Source	License
vscode-great-icons	MIT
vscode-material-icon-theme	MIT
Material Design Icons (Pictogrammers)	Apache 2.0
Material Symbols (Google)	Apache 2.0

See NOTICE for full attribution and license texts.