get-icon / geticon

Web / IT project stack / tool / technique icon / logo collection & markdown / HTML generator :electron:🚀

Get Icon

Web / IT project programming language / tool / package / library / technology / stack icon / logo collection and markdown / HTML generator.

It helps you list your stack, which is the set of tools & technologies used by your project or favored by you.

Examples:

Usage
	npm start	npm run start:deno
	yarn start	yarn start:deno

to generate output.md file from data (one technology name per line, case-insensitive) in input.txt with settings in settings.json.

Rationale

These programming languages / libraries / development tools / software packages are helpful, mostly free and open-source, not-for-profit. If we use them in our project, showing their icons, preferably with their links, to give them appropriate credit on our project's homepage, is the least and the easiest we can do.

Icons

1546 icon / logo images:

• 78% are originally from Gil Barbara's repo
• 22% are collected by Tom Chen or other contributors of geticon

All images are optimized with SVGO

To do

A big change of the repo is planned, see Issue #6: Reorganization of the project. In a nutshell, the plan includes

• Periodical fetch & auto-update from sources
• Next.js based website, GUI tool
• npm package, CLI tool
• Further standardization of the icons

Licenses

Icon / logo SVG code are under CC0

Icon / logo design are copyrighted, trademark law also applies

Scripts are under MIT

geticon's Issues

Reorganization of the project

Plan - make an overhaul of the project (repo):

• fetch and periodically auto-update all icons from several sources, including:
  1. icons modified / added by myself or contributors of this repo
  2. VectorLogoZone
  3. gilbarbara/logos
  4. simple-icons
• make a Next.js based website, there will be an index page, each icon will have its own webpage as well
  • GUI tool on the website, to generate icon list HTML code
• release a npm package (#1)
  • CLI tool (w/ config) to generate icon list HTML code and insert into README.md or other files
• the above website & npm package will be written in TypeScript
• Icon spec:
  • SOURCE (/icons/):
    • FORMAT:
      • SVG only
      • optional, prefered nominal size (the larger one of width & height) = 256(px)
      • no whitespace (i.e. canvas should fit the content), unless, in very rare cases, the image has whitespace per se
      • with viewBox without width or height
      • no xml declaration (because it's not needed)
      • the source SVGs had whitespace removed with Inkscape (script) and were optimized with SVGO (settings), but not minified (i.e. remove newlines and indentations)
      • text must be converted to outline, non-outline text with unknown font is not acceptable
    • VERSION:
      • primary is square shape icon
      • possibly with secondary versions which are rectancle shape logos or other icons
      • night mode icon set also possible (#2)
  • OUTPUT (/dist/?):
    • FORMAT:
      • SVG (minified)
        • Original size (viewBox w/o width/height) (optimization only) (/dist/svg/)
        • square, nominally 256 x 256 px (viewBox w/o width/height) (/dist/svg_sqr/)
        • (maybe) square, nominally 22 x 22 px (viewBox AND width, height) just for a GitHub mobile app bug (icon becomes very big and HTML img width does not work) (/dist/svg22/)
      • PNG
        • 256 x 256 px (/dist/png/)
• for the aliases, treat names with spaces and without spaces as the same, case-insensitive
• test. logo.json file should be validated

See /data/types/icons.ts for icons.json data type. Example:

  {
    "name": "JavaScript",
    "aliases": [
      "js"
    ],
    "tags": [
      "javascript",
      "programming language"
    ],
    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
    "files": [
      {
        "filename": "javascript.svg",
        "type": "icon",
        "desc": "JavaScript Icon",
        "tags": [
          "yellow",
        ],
        "source": "https://github.com/gilbarbara/logos/raw/master/logos/javascript.svg"
      },
      {
        "filename": "javascript2.svg",
        "type": "logo",
        "desc": "JavaScript Text Logo",
        "tags": [
          "yellow",
          "text"
        ],
        "source": "../javascript2.svg"
      }
    ]
  },

Monero iron with white "M" fill?

The Monero icon doesn't look quite right when put on a dark background. Could we get a version where the "M" is filled in rather than being transparent?

Add more variations, or use standard codes

Hey, great repo.
Would love to have variations of the name. For example, I autoget these icons based on a Language field I have in my frontend. I lowercase it as such to get the icon:

  const languageCode = language
    .replaceAll(" ", "-")
    .toLowerCase()
  console.log("languageCode", languageCode)

  const src = `https://github.com/get-icon/geticon/raw/master/icons/${languageCode}.svg`

In there, I have "C++", which translates to "https://github.com/get-icon/geticon/raw/master/icons/c++.svg", which doesn't exist. Instead, it's called c-plusplus.svg.

It'd be nice to have standardization or duplication. i.e. keep both c-plusplus, c++.svg, and cplusplus.svg at the same level.

[Question] Any idea when this is released on NPM?

I very much like this idea and it seems there is no one else doing it, but it would even be better if it would be available on NPM registry. I saw it's in the TODO in the readme but any idea on when this is going to be published? 😄

Thanks!

VSCode Icon

please VSCode icon exists here or not?

add Astro icon plss

Request for more icons

Please add icons for the following products, if possible:

• Swoole
• FFMPEG
• Linux
• Amazon Web Services and specific products like S3, CloudFrone, EC2, SES, etc.
• Adobe AfterEffects, Premiere Pro, Lightroom

Litecoin logo?

https://cryptologos.cc/logos/litecoin-ltc-logo.svg?v=022

GitHub icon in night mode

GitHub icon has the cat as a "hole", should be a shape, filled with light grey.

In "night" GitHub mode the icon is not visible, renders dark on dark background.

FastAPI Icon

https://fastapi.tiangolo.com/img/icon-white.svg