inline-logo

Replace text with brand logos inline — the text stays selectable, copyable, and accessible to screen readers.

Works with any image format: SVG, PNG, JPG, WebP, GIF, base64 data URIs.

Framework bindings available: inline-logo-react · inline-logo-vue

How it works

A <span> with real text is styled with color: transparent and font-size scaled down. A ::after pseudo-element renders the logo as a background-image, positioned absolutely so it can overflow freely. CSS custom properties control everything:

| Property | What it does | |----------|-------------| | --il-logo | The logo image (url(...)) | | --il-scale | Text slot width multiplier (1 = natural width) | | --il-pad | Horizontal padding around the text slot | | --il-logo-width | Logo visual width (%) | | --il-logo-height | Logo visual height as % of parent text height | | --il-offset-x / --il-offset-y | Nudge the logo visual |

Install

npm install inline-logo

Always import the CSS:

import 'inline-logo/style.css';

Usage

Pure HTML + CSS (zero JS)

<link rel="stylesheet" href="node_modules/inline-logo/dist/style.css">

<p>
  Works with any
  <span class="inline-logo" style="
    --il-logo: url('/logos/google.svg');
    --il-offset-y: 1px;
    --il-pad: 2px;
  ">Google</span>
  product.
</p>

data-inline-logo + init()

Define logos once, apply them declaratively:

<p>
  Push to <span data-inline-logo="github">GitHub</span> and
  publish on <span data-inline-logo="npm">npm</span>.
</p>

<script type="module">
  import { init } from 'inline-logo';

  init({
    github: { logo: '/logos/github.svg', scale: 0.35, offsetY: 1 },
    npm:    { logo: '/logos/npm.svg',    pad: 4, offsetY: 1 },
  });
</script>

Generate HTML strings

import { html, createLogoRenderer } from 'inline-logo';

// One-off
const span = html('Google', {
  logo: '/logos/google.png',
  offsetY: 1,
});

// Reusable logo renderer
const renderLogo = createLogoRenderer({
  google: { logo: '/logos/google.png', pad: 2, offsetY: 1 },
  github: { logo: '/logos/github.svg', scale: 0.35, offsetY: 1 },
});

element.innerHTML = `Deploy from ${renderLogo('github')} to ${renderLogo('google')} Cloud.`;

Dynamic content with observe()

For SPAs or content loaded after page init — uses a MutationObserver:

import { observe } from 'inline-logo';

const disconnect = observe({
  github: { logo: '/logos/github.svg', scale: 0.35, offsetY: 1 },
});

// Later: stop watching
disconnect();

API

getStyles(config): InlineLogoStyleProps

Convert config into CSS custom properties. Works with any framework.

html(text, config): string

Generate an HTML string for a single inline logo.

createLogoRenderer(logos): (name, text?) => string

Create a reusable function that generates HTML strings from a logo registry.

init(logos, root?): void

Scan the DOM for [data-inline-logo] elements and style them.

observe(logos, root?): () => void

Watch the DOM for dynamically added [data-inline-logo] elements. Returns a cleanup function.

Config

interface InlineLogoConfig {
  logo: string;        // URL or data URI — any image format (required)
  scale?: number;      // Text slot width multiplier (default: 1)
  pad?: number;        // Horizontal padding in px (default: 0)
  logoWidth?: number;  // Logo visual width % (default: 100)
  logoHeight?: number; // Logo visual height % of parent text (default: 100)
  offsetX?: number;    // Horizontal nudge in px (default: 0)
  offsetY?: number;    // Vertical nudge in px (default: 0)
}

Logo sources

This package does not ship logos. Bring your own, or use:

• Simple Icons — 3000+ brand SVGs, CDN: https://cdn.simpleicons.org/{name}
• Vector Logo Zone — consistent and clean SVG format logos, great for optical typography matching.
• Brandfetch — logo API

License

MIT