initial-logo.js

🇺🇸 English | 🇯🇵 日本語

Generate JavaScript/TypeScript style logos (up to 2 characters inside a square) easily.

Features

• 🎨 Customizable: Change colors, size, fonts, border radius, text anchor, and more.
• 🌈 Gradients: Support for linear/radial gradient backgrounds and text.
• 🔤 Custom Fonts: Load fonts from any URL or local file (WOFF2/TTF).
• ⚡ Lightweight: Zero dependencies for the core logic.
• 🖼️ Multiple Formats: Generate SVG strings (core), or PNG/JPG/WEBP via the Node.js adapter.

Installation

bun add initial-logo
# or
npm install initial-logo

Usage

Generate SVG String

import { generateRawSvg } from 'initial-logo';

// Basic usage
const svgString = await generateRawSvg({
  text: 'TS',
  size: 100,
  textColor: '#ffffff',
  backgroundColor: '#3178c6',
});

// Use in an <img> tag via data URL
const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;

Gradient Example

const svgString = await generateRawSvg({
  text: 'GR',
  textColor: ['#ff0000', '#0000ff'],          // linear gradient text
  backgroundColor: ['#222222', '#444444'],    // linear gradient background
  textGradientType: 'linear',                 // 'linear' (default) | 'radial'
  backgroundGradientType: 'linear',
});

Node.js Adapter (PNG / JPG / WEBP)

import { generatePng, generateJpg, generateWebp } from 'initial-logo/adapters/node';

const pngBuffer  = await generatePng({ text: 'TS', backgroundColor: '#3178c6' });
const jpgBuffer  = await generateJpg({ text: 'JS', backgroundColor: '#f7df1e' }, 90);
const webpBuffer = await generateWebp({ text: 'DN', backgroundColor: '#000000' }, 90);

The Node.js adapter depends on sharp. It is included in the package dependencies.

CLI Usage

# Generate SVG (default output: initial-logo.svg)
npx initial-logo -t TS

# Customize colors and size
npx initial-logo -t JS -s 200 --textColor "#000000" --backgroundColor "#f7df1e" -o js-logo.svg

# Gradient
npx initial-logo -t GR \
  --textColor "#ff0000" --textColor "#0000ff" \
  --backgroundColor "#222222" --backgroundColor "#444444" \
  -o gradient.svg

# Export as PNG
npx initial-logo -t TS -o logo.png

# Rounded corners, custom font weight, text anchor
npx initial-logo -t TS -r 16 -w 700 -a bottom-right -o logo.svg

CLI Options

Option	Alias	Description	Default
--text	-t	Logo text — up to 2 graphemes (required)	-
--size	-s	Logo size in pixels	100
--output	-o	Output path (.svg / .png / .jpg / .webp)	initial-logo.svg
--textColor	-T	Text color — repeat for gradient	#ffffff
--backgroundColor	-B	Background color — repeat for gradient	#000000
--textGradientType		Text gradient type: linear | radial	linear
--bgGradientType		Background gradient type: linear | radial	linear
--fontSource	-f	Font URL or local file path	Raleway 700 (jsDelivr)
--fontSize	-F	Font size in pixels	Math.round(size * 0.525)
--fontWeight	-w	Font weight	700
--borderRadius	-r	Border radius in pixels	0
--textAnchor	-a	Text anchor position (see below)	center
--help	-h	Display help message	-

--textAnchor values: top-left | top | top-right | left | center | right | bottom-left | bottom | bottom-right

API

generateRawSvg(options: LogoOptions): Promise<string>

Generates a logo as an SVG string. This is the primary export of the core library.

LogoOptions

Property	Type	Default	Description
text	string	(Required)	Logo text — up to 2 graphemes (supports emoji, CJK, etc.).
size	number	100	Size of the square in pixels. Must be a positive finite number.
textColor	string | string[]	'#ffffff'	Text color. Pass an array of 2+ colors for a gradient.
textGradientType	'linear' | 'radial'	'linear'	Gradient type for text. Applies only when textColor is an array.
backgroundColor	string | string[]	'#000000'	Background color. Pass an array of 2+ colors for a gradient.
backgroundGradientType	'linear' | 'radial'	'linear'	Gradient type for background. Applies only when backgroundColor is an array.
fontSource	string | ArrayBuffer	Raleway 700 (jsDelivr CDN)	Font URL or ArrayBuffer of a WOFF2/TTF font.
fontSize	number	Math.round(size * 0.525)	Font size in pixels.
fontWeight	string | number	700	Font weight passed to the font renderer.
borderRadius	number	0	Corner radius of the square in pixels.
textAnchor	TextAnchorPosition	'center'	Position of the text within the square.

Node.js Adapter

Import from initial-logo/adapters/node.

generatePng(options: LogoOptions): Promise<Buffer>

generateJpg(options: LogoOptions, quality?: number): Promise<Buffer>

quality defaults to 90.

generateWebp(options: LogoOptions, quality?: number): Promise<Buffer>

quality defaults to 90.

Types

type TextAnchorPosition =
  | 'top-left' | 'top' | 'top-right'
  | 'left'     | 'center' | 'right'
  | 'bottom-left' | 'bottom' | 'bottom-right';

type GradientType = 'linear' | 'radial';

Development

# Install dependencies
bun install

# Start playground
bun run playground

# Run tests
bun run test

# Build
bun run build

Disclaimer

This tool is an unofficial project and is not affiliated with, endorsed by, or connected to Oracle, Microsoft, or the OpenJS Foundation. Users are solely responsible for the trademark and copyright compliance of any logos generated using this tool.

License

MIT