Skip to content
🈹 Better icons for languages, because flags just don't cut it
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
LICENSE
README.md
_config.yml
colors.json
example.png
files.ts
index.ts
one-color.svg
package.json
template.sketch
three-colors.svg
tsconfig.json
two-colors.svg
widths.ts
yarn.lock

README.md

🌐 Language icons

NPM Icon size Build Type definitions GitHub Vulnerabilities

Flags are not languages, so we shouldn't use country flags as language icons.

You can use these icons instead.

They are generated using the language's ISO 639-1 code, combined with some colors. Colors are flag-inspired. For example, green/red for Portuguese, and they fallback to blue for unknown colors. If you want to color a currently blue icon, edit the colors.json file and make a pull request.

Each icon is an SVG, around 300 ± 10 bytes.

🖼️ Usage

You can use a CDN like Unpkg to embed a flag icon:

https://unpkg.com/language-icons/icons/LANGUAGE_CODE.svg

In HTML, for example:

<img alt="English" src="https://unpkg.com/language-icons/icons/en.svg">

Icons are also available on NPM:

npm install language-icons

They are in the ./icons folder, you can use an SVG loader to import them:

import English from "./node_modules/language-icons/icons/en.svg"

⭐ Why

Example of flags versus language icons

🎨 Icons

See the list of icons: https://unpkg.com/language-icons@0.2.0/icons/

English Hindi Portuguese German French Chinese Spanish Dutch Urdu

⚒️ Building

Install Typescript dependencies and build icons using the npm run build command.

📝 License

Icons and code, both MIT

You can’t perform that action at this time.