A lightweight TypeScript library providing essential file type icons plus a curated set of connection icons (operating systems, server software, databases, clouds, AI vendors, runtimes), similar to vscode-icons but with only the icons that are actually used.
- π― Essential Icons Only: 48 file type icons and 95 connection icons
- π¦ Lightweight: 456KB in total, against 7.6MB for the full vscode-icons set
- π§ TypeScript: Full TypeScript support with type definitions
- π ES Modules: Modern ES module support only
- π Complete API: Same interface as vscode-icons for easy migration
npm install electerm-iconsimport {
getIconForFile,
getIconForFolder
} from 'electerm-icons';
// Get icon for files
console.log(getIconForFile('index.html')); // 'file_type_html.svg'
console.log(getIconForFile('script.js')); // 'file_type_js.svg'
console.log(getIconForFile('main.py')); // 'file_type_python.svg'
console.log(getIconForFile('unknown.xyz')); // 'default_file.svg'
// Get icon for folders
console.log(getIconForFolder('src')); // 'default_folder.svg'Besides file types, the package ships a curated set of icons for hosts β the icon a bookmark, a bookmark folder or a connection tab shows next to its name.
os: Ubuntu, Debian, CentOS, Red Hat, Fedora, Arch Linux, Rocky Linux, Linux Mint, openSUSE, CloudLinux, Linux, FreeBSD, macOS, Apple, Windows, Android, Raspberry Piserver: Docker, Kubernetes, Nginx, Apache HTTP, Traefik, Jenkins, GitLab, GitHub, Grafana, Prometheus, Zabbix, Tomcat, Helm, Rancher, Ansible, Terraform, Vagrant, VMware, Serverless, Terminaldatabase: PostgreSQL, MySQL, MariaDB, MongoDB, Redis, Elasticsearch, OpenSearch, Kafka, RabbitMQ, Meilisearchcloud: AWS, Azure, Google Cloud, Cloudflare, Heroku, Vercel, Netlify, Linode, Vultr, OpenStackai: OpenAI, Ollama, Anthropic, Claude, Gemini, Hugging Face, Mistral AI, DeepSeek, Qwen, GitHub Copilot, AI SDKlang: Python, Node.js, Go, Rust, Java, JavaScript, PHP, Ruby, .NET, Swift, Kotlingeneric: Server, Database, Folder, Home, Cloud, Locked, Secure, Network, Disk, NAS, Internet, Key, Dashboard, Web, DNS, Archive
Every entry maps to <icons dir>/<name>.svg, so a consumer only needs the icons
directory plus the manifest:
import {
connectionIcons,
connectionIconGroups,
findConnectionIcons
} from 'electerm-icons';
console.log(connectionIcons[0]);
// { name: 'ubuntu', label: 'Ubuntu', group: 'os', aliases: [ 'linux' ] }
// search by name, label or alias β 'k8s' finds kubernetes
console.log(findConnectionIcons('k8s').map(icon => icon.name));The icons are plain self-contained SVGs (no currentColor, fixed colours), so they can
be used straight from an <img src> without any build step. Monochrome marks (macOS,
OpenAI, GitHub, Vercel, β¦) are drawn in a mid grey #808080 instead of black, because an
<img> cannot be recoloured by css and black would vanish on a dark background.
- HTML:
.html,.htm,.xhtml - CSS:
.css,.scss,.sass,.less - JavaScript:
.js,.mjs,.cjs - TypeScript:
.ts,.tsx - JSON:
.json,.jsonc - XML:
.xml,.xsd,.xsl
- Python:
.py,.pyw,.pyc,.pyo - Java:
.java,.class,.jar - C/C++:
.c,.h,.cpp,.cxx,.cc,.hpp,.hxx - C#:
.cs,.csx - PHP:
.php,.phtml,.php3,.php4,.php5 - Go:
.go - Rust:
.rs,.rlib - Ruby:
.rb,.erb,.gemspec - Swift:
.swift - Kotlin:
.kt,.kts
- YAML:
.yaml,.yml - TOML:
.toml - INI:
.ini,.cfg,.conf - SQL:
.sql,.mysql,.pgsql
- Markdown:
.md,.markdown,.mdown
package.json,package-lock.json.gitignore,.gitattributesDockerfile,docker-compose.ymlCMakeLists.txt,MakefileLICENSE,README.md
Returns the appropriate icon filename for a given file.
Returns the appropriate icon filename for a folder.
Returns the connection icons whose name, label or alias contains keyword
(case insensitive). An empty keyword returns all of them.
DEFAULT_FILE: Default file iconDEFAULT_FOLDER: Default folder iconconnectionIcons:ConnectionIcon[], the connection icon manifestconnectionIconGroups: the group ids used byConnectionIcon.group
type ConnectionIconGroup =
| 'os' | 'server' | 'database' | 'cloud' | 'ai' | 'lang' | 'generic'
interface ConnectionIcon {
/** file name in the icons directory, without the .svg extension */
name: string
label: string
group: ConnectionIconGroup
/** extra search terms, e.g. k8s for kubernetes */
aliases?: string[]
}| Library | Icons | Size | Use Case |
|---|---|---|---|
| vscode-icons | 1700+ | 7.6MB | Full IDE support |
| electerm-icons | 143 | 456KB | File types + connection icons |
electerm-icons provides the same API as vscode-icons, making migration simple:
// Before (vscode-icons)
import { getIconForFile } from 'vscode-icons-js';
// After (electerm-icons)
import { getIconForFile } from 'electerm-icons';
// Same function calls work identically
const icon = getIconForFile('index.html');# Build the library
npm run build
# Run tests
npm test
# Development with watch mode
npm run devMIT Β© ZHAO Xudong
The file type icons are sourced from vscode-icons, the connection icons from SVG Logos (via @iconify-json/logos) and a few generic glyphs from Material Design Icons (via @iconify-json/mdi). Both icon sets are MIT licensed. All brand logos remain the trademarks of their owners and are used only to identify the corresponding software.
Copyright (c) 2016-present Roberto Huertas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.