Warning
Beta Version: This project is currently in beta. APIs are subject to change without notice.
πΊπΈ English | π―π΅ ζ₯ζ¬θͺ
Generate JavaScript/TypeScript style logos (2 characters inside a square) easily.
- π¨ Customizable: Change colors, size, fonts, and more.
- π Gradients: Support for gradient backgrounds and text.
- π€ Custom Fonts: Easily load fonts from Google Fonts or other sources.
- β‘ Lightweight: Zero dependencies for the core logic.
- πΌοΈ Multiple Formats: Generate HTML Divs, SVG strings, or SVG Elements.
bun add initial-logo
# or
npm install initial-logoimport { generateLogo, generateSvg, generateSvgElement } from 'initial-logo'; // Generate HTML Div Element const logo = generateLogo({ text: 'TS', size: 100, textColor: '#ffffff', backgroundColor: '#3178c6', }); document.body.appendChild(logo); // Generate SVG String const svgString = generateSvg({ text: 'JS', textColor: '#000000', backgroundColor: '#f7df1e', }); // Generate SVG Element const svgElement = generateSvgElement({ text: 'JS', textColor: '#000000', backgroundColor: '#f7df1e', }); document.body.appendChild(svgElement);
const gradientLogo = generateLogo({ text: 'GR', textColor: ['#ff0000', '#0000ff'], // Gradient text backgroundColor: ['#222222', '#444444'], // Gradient background });
You can also use the CLI to generate logos directly from the terminal.
# Generate a logo and save to file npx initial-logo -t TS -o logo.svg # Customize colors and size npx initial-logo -t JS -s 200 --textColor "#000000" --backgroundColor "#f7df1e" -o js-logo.svg # Gradient example npx initial-logo -t GR --textColor "#ff0000" --textColor "#0000ff" --backgroundColor "#222222" --backgroundColor "#444444" -o gradient.svg
| Option | Alias | Description | Default |
|---|---|---|---|
--text |
-t |
Logo text (required) | - |
--size |
-s |
Logo size in pixels | 512 |
--output |
-o |
Output file path | stdout |
--textColor |
Text color (repeat for gradient) | #ffffff |
|
--backgroundColor |
Background color (repeat for gradient) | #000000 |
|
--fontSource |
Font source URL | - | |
--fontSize |
Font size | - | |
--help |
-h |
Display help message | - |
Generates a logo as an HTML div element.
Generates a logo as an SVG string.
Generates a logo as an SVG DOM element.
| Property | Type | Default | Description |
|---|---|---|---|
text |
string |
(Required) | The 2 characters to display. |
size |
number |
100 |
Size of the square in pixels. |
textColor |
string | string[] |
'#ffffff' |
Text color. Pass an array for gradient. |
backgroundColor |
string | string[] |
'#000000' |
Background color. Pass an array for gradient. |
fontSource |
string |
(Embedded JetBrains Mono) | URL to load the font from (WOFF2 format recommended). |
fontSize |
number |
Math.round(size * 0.65) |
Font size in pixels. |
fontWeight |
string | number |
'800' |
CSS font-weight. |
lineHeight |
string | number |
0.8 |
CSS line-height. |
# Install dependencies bun install # Start playground bun run playground # Build bun run build
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.
MIT