flowpack-symbols

Drop-in icon font by Flowpack that supplants specific glyphs of Google's Material Symbols Outlined with brand icons.

This package is a derivative work that builds on top of, and is meant to be used alongside, Google's material-design-icons (Material Symbols / Material Fonts). It does not redistribute or fork those fonts — it ships only the brand glyphs and places them at the same Unicode codepoints as the Material symbols they replace, so swapping them in your existing UI is one extra CSS class.

What's included

| Brand | Suplanta a | Codepoint | Render | | -------- | ---------------- | --------- | ----------------------- | | WhatsApp | send | U+E163 | Monocromo (icon-font) | | Flowpack | package_2 | U+F569 | Multicolor (SVG inline) |

Install

npm install flowpack-symbols

Usage

1. Make sure Material Symbols Outlined is loaded

This package does not bundle Material Symbols. Load it however you already do, e.g.:

<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">

2. Import the CSS

With any modern bundler (Vite, Webpack, Next.js, etc.) the bundler resolves the font and SVG assets automatically:

import "flowpack-symbols";
// or, equivalent:
import "flowpack-symbols/css";

In plain HTML (no bundler), copy the dist/ folder to your static assets and link the CSS:

<link rel="stylesheet" href="/assets/flowpack-symbols/CustomSymbols.css">

3. Add a brand-* class to existing Material Symbols spans

<!-- Before: Material Symbols default 'send' (Telegram-style icon) -->
<span class="material-symbols-outlined">send</span>

<!-- After: WhatsApp -->
<span class="material-symbols-outlined brand-whatsapp">send</span>

<!-- Flowpack logo (multicolor) -->
<span class="material-symbols-outlined brand-flowpack">package_2</span>

<!-- Variante dibujada del logo de Flowpack -->
<span class="material-symbols-outlined brand-flowpack-art">package_2</span>

Color and size inherit from the parent — just like Material Symbols:

<span class="material-symbols-outlined brand-whatsapp"
      style="font-size: 32px; color: #25D366;">send</span>

How it works

• A minimal icon-font (CustomSymbols.woff2, ~1 KB) ships one glyph per monochrome brand, each at the exact codepoint of the Material symbol it replaces.
• The CSS hides the original glyph (visibility: hidden) and renders the brand glyph via ::before. Layout, font-size and ARIA stay intact.
• For brands whose logo can't be expressed monochrome (multiple colors, gradients, complex curves), the same brand-* class is overridden to use a multicolor SVG via background-image instead. This is the case of brand-flowpack.

Adding a new brand

1. Drop a clean SVG (viewBox="0 0 24 24", fill="currentColor") in svg/ — file name = brand identifier.
2. In icons.config.js, add the mapping and codepoint:

   const REPLACES = {
     whatsapp: 'send',
     flowpack: 'package_2',
     myicon:   'star',  // ← new
   };
   const MATERIAL_CODEPOINTS = {
     send: 0xe163,
     package_2: 0xf569,
     star: 0xe838,  // ← lookup in https://github.com/google/material-design-icons codepoints file
   };

3. npm run build.
4. Add a CSS rule to dist/CustomSymbols.css:

   .material-symbols-outlined.brand-myicon::before { content: "\e838"; }

For a multicolor SVG override, drop the SVG in dist/ and replicate how brand-flowpack is set up in the CSS.

Acknowledgements

• Built on, and derived from, the Material Symbols / Material Icons project by Google, licensed under Apache 2.0. All Material codepoints used here belong to that project.
• Webfont generated with fantasticon.

License

MIT © Flowpack