simple-icons-png

3,400+ brand icons as ready-to-use PNGs — the PNG companion to the popular Simple Icons project.

Why This Exists

Simple Icons is an incredible library, but it only ships SVGs. SVG files are great for websites but fail in many real-world use cases:

• HTML emails — Most email clients (Outlook, Samsung Mail, Apple Mail) block or ignore SVGs loaded via <img> tags.
• PDF generation — Many PDF engines can't render remote SVGs.
• Native apps — Some mobile/desktop frameworks need raster images.
• Markdown files — GitHub, Notion, and others render PNG from <img> but silently drop SVGs.
• Canvas / WebGL — Drawing SVGs on a canvas element is unreliable across browsers.

This package solves all of those problems by pre-rendering every icon into a crisp, correctly-sized PNG.

Icon Specifications

| Property | Value | |---|---| | Format | PNG (24-bit, transparent background) | | Size | 256 × 256 px | | Color | Neutral slate #475569 (overridable, see below) | | Total icons | 3,423 | | Source | simple-icons SVG library |

Why 256 × 256 px?

256px is the industry standard raster size for icon packs:

• Email-safe — At a display size of 24–48px, a 256px source image delivers perfect Retina/HiDPI (2× and 3×) rendering without wasted bytes.
• Universal coverage — Large enough for native app icons, small enough to keep the package lean.
• CDN-friendly — Small file size (~2–4 KB per PNG), ultra-fast to serve globally.

If you need a different size, see the generate your own section below.

Usage

via npm

npm install simple-icons-png

Reference an icon in your code:

const iconPath = require('simple-icons-png/icons/github.png');

Or in HTML:

<img src="node_modules/simple-icons-png/icons/github.png" width="24" height="24" alt="GitHub">

via CDN (jsDelivr)

No installation needed. Link directly in HTML, emails, or Markdown:

<!-- Replace 'github' with any brand slug from simpleicons.org -->
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/github.png" width="24" height="24" alt="GitHub">

Common examples:

<!-- Social -->
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/x.png" width="24" height="24" alt="X">
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/instagram.png" width="24" height="24" alt="Instagram">
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/youtube.png" width="24" height="24" alt="YouTube">
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/linkedin.png" width="24" height="24" alt="LinkedIn">

<!-- Developer Tools -->
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/github.png" width="24" height="24" alt="GitHub">
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/figma.png" width="24" height="24" alt="Figma">
<img src="https://cdn.jsdelivr.net/npm/simple-icons-png@latest/icons/stripe.png" width="24" height="24" alt="Stripe">

via GitHub CDN (jsDelivr)

If you are using the GitHub-hosted version, replace npm with gh/cuckcoder/simple-icons-png@main:

<img src="https://cdn.jsdelivr.net/gh/cuckcoder/simple-icons-png@main/icons/github.png" width="24" height="24">

Finding the Right Icon Slug

Every icon name maps 1:1 to the official Simple Icons slug.

1. Go to simpleicons.org
2. Search for the brand
3. The slug shown below the brand name is the filename (e.g., github → github.png)

Generate Your Own

Don't want to use the pre-generated #475569 slate color? You can generate your own color or size using sharp:

npm install sharp simple-icons

import fs from 'fs/promises';
import path from 'path';
import sharp from 'sharp';

const SIZE = 128; // Change to your desired px
const COLOR = '#1d4ed8'; // Change to your brand color
const OUTPUT = './my-icons';

const iconsDir = path.resolve('./node_modules/simple-icons/icons');
const files = (await fs.readdir(iconsDir)).filter(f => f.endsWith('.svg'));

await fs.mkdir(OUTPUT, { recursive: true });

for (const file of files) {
  let svg = await fs.readFile(path.join(iconsDir, file), 'utf-8');
  svg = svg.replace('<svg ', `<svg fill="${COLOR}" `);
  await sharp(Buffer.from(svg)).resize(SIZE, SIZE).png().toFile(`${OUTPUT}/${file.replace('.svg', '.png')}`);
}

console.log(`Generated ${files.length} icons.`);

Icon Count

Total icons: 3,423
Format:      PNG
Resolution:  256 × 256 px

New icons are added whenever simple-icons publishes a new release.

Related Projects

• simple-icons — The original SVG library this package is based on.
• react-simple-icons — React component wrapper for Simple Icons SVGs.

License

Icons are sourced from Simple Icons, which are released under CC0 1.0 Universal.

This package and all generated PNG assets are released under the MIT License. See LICENSE for details.