DEVICONS
Documentation

Contributing

Add a missing icon, improve an existing glyph, or help refine the grid.

All changes land through pull requests on GitHub.

Before you open a PR

  1. Search first. Check the icon library and open issues for duplicates.
  2. Follow the grid. Icons use a unified grid. Larger marks use 2px strokes.
  3. Check brand guidelines. Link the guideline you followed for company/product logos.
  4. Include:
    • A one-sentence description in the metadata frontmatter
    • At least one tag (frontend, cloud, database, etc.)
    • A link to the official brand website
    • Both colored and monochrome SVG variants

Adding an icon

  1. Add the optimized SVG to packages/core/export-files/icons/<slug>.svg
  2. Add the monochrome version to packages/core/export-files/font/<slug>.svg

Use kebab-case file names (visual-studio-code). For a glyph-only variant, add the -icon suffix (nextjs and nextjs-icon). The file name becomes the component name (nextjs-icon becomes NextjsIcon), the public SVG URL (https://devicons.io/devicons/icons/nextjs-icon.svg), and the font class (devicons-nextjs-icon).

  1. Commit: feat: add next-js icon
  2. Generate the docs page:
cd apps/website && pnpm run copy:mdx
  1. Fill in the description, tags, alternatives, and website link in the generated MDX file
  2. Commit: docs: add next-js icon

Improving an existing icon

  • Keep original icon names. They are public API.
  • Match the visual weight of neighboring icons.
  • Test both colored and monochrome variants.

Icon specs

  • Canvas size: 600x600, maxing out by width or height
  • Clean up SVGs: remove unnecessary groups, metadata, and attributes
  • Monochrome icons use currentColor for fill or stroke
  • Use SVGO with default config to optimize

Code of conduct

Be kind. Assume good intent.