How to Use logoname

Quick Start Video or Concept

logoname is built around constraint-based design. Rather than forcing you to work with blank canvases, we provide structured presets, coordinated font pairings, and immediate real-world mockups. This allows developers and designers to build premium-grade startup logos in under a minute.

Step-by-Step Customization

1. Select Your Brand Vibe

Presets programmatically establish cohesive typography scales, grids, and colors. This ensures your logo starts with a balanced foundation:

• Tech/Minimal: Uses Geist Sans or Geist Mono. Colors are restricted to dark greys, crisp whites, and glowing cyan/cyber green. Ideal for SaaS, developer tools, and API startups.
• Professional: Curates Playfair Display or high-weight Display options. Highlights deep sapphire navy, slate gray, and luxury champagne-gold. Perfect for corporate consultancies, finance, and legal apps.
• Playful: Leverages the rounded Outfit typeface. Emphasizes warm sunset oranges, canary yellows, and energetic purples. Great for consumer web apps, education, and social tools.
• Creative: Explores artistic serif alignments, wine-burgundy palettes, and lavender hues. Designed for agencies, design studios, and portfolio branding.

2. Configure Text & Typography Options

Customize the core brand label and its layout. The generator automatically limits text characters to maintain vector balance, and offers fine-grained typography options:

• Wordmark weight: Adjust the thickness of the logo title font from Thin (100) to Black (900).
• Wordmark tracking: Finely control the letter spacing (from -5px to 25px) of your main logo text for perfect optical balance.
• Four Layout Modes: Switch instantly between Horizontal (icon on the left), Vertical (stacked), Icon-Only (perfect for favicons), and Text-Only (pure wordmarks).

3. Access 150,000+ Vector Icons

Search directly inside our global vector database containing icons from Lucide, Radix, and Heroicons. Simply type keywords like rocket, database, shield, or activity to fetch matching crisp SVGs. Alternatively, click any curated preset icons in the grid.

4. Upload Custom SVG Icons

If you have a pre-existing logo mark or a custom SVG graphic, you can upload it directly:

• Drag & Drop: Drag any .svg file from your computer and drop it directly onto the dashed upload zone in the Icon tab.
• Browse Files: Alternatively, click the upload box to browse and select an SVG file from your local files (Max size: 50KB).
• Adapt to Theme Color: Enable this toggle to have your custom SVG automatically colorized by the engine's brand colors or gradients. Disable it if you want the custom SVG to retain its original hardcoded multi-color paths.
• Manage Icons: Your uploaded SVGs are persisted in your browser's local storage. You can select them anytime from the "Your Uploaded SVGs" shelf, or delete them by hovering and clicking the "x" button.

5. Set Canvas Backgrounds, Gradients & Patterns

Choose from multiple premium background options for avatar exports or general brand presentation:

• Solid: Set a clean solid color using the HEX color picker.
• Gradient: Create linear gradients with control over start/end colors and angles.
• Mesh Gradients: Select gorgeous fluid mesh gradient presets including Sunset Glow, Neon Aurora, Candy Pastel, Cosmic Violet, and Sleek Noir.
• Pattern Overlays: Add drafting grid, fine dots, diagonal stripes, crosses, or wave pattern overlays with full color and opacity control.

6. Adjust Canvas Aspect Ratios

Adapt the workspace proportions to fit different placement requirements:

• 1:1 Square: The default shape, perfect for general brand icon placements, avatars, and badges.
• 16:9 Wide: Excellent for visualizing how the logo sits inside header banners, pitch decks, and hero sections.
• 3:1 Banner: Model a narrow horizontal strip, matching modern web header navbars and application dashboard headers.
• 4:5 Tall: A vertical portrait container, optimal for previewing mobile screen cards, package graphics, and physical swag.

7. Check Contrast, Grid & Snapping

Ensure your logo matches design alignment standards and reads legibly on different platforms:

• Contrast Tester: Quickly preview your logo on white, black, or your custom brand color background. These test backgrounds are visual helpers and do not affect transparency or colors of the final exported logo file.
• Show Grid & Snap: Turn on a precise dotted grid overlay and snap elements mathematically to ensure clean pixel alignment.

8. Select PNG Export Presets & Custom Size

Download ready-to-use PNG versions of your design at specific pixel resolutions:

• Favicon (32 × 32 px): Best for browser tab shortcuts and tiny app icons.
• Social Profile (512 × 512 px): Perfectly sized for GitHub, Twitter, Discord, and Slack avatars.
• Standard Web (1024 × 1024 px): Ideal for embedding on web pages, blogs, and standard marketing content.
• High-Res HD (2000 × 2000 px): Professional-grade sizing for print materials, high-density retina displays, and slide decks.
• Ultra HD 4K (4000 × 4000 px): Premium print-resolution output with flawless clarity.
• Custom Size: Unlock the size slider to scale the output width anywhere between **16px and 5000px** in 16px increments.

9. URL State Sharing

Every adjustment you make in the editor is compressed and serialized live into the browser URL query parameter. To share your design with a colleague, client, or save it for later, simply click the Share button in the navbar or copy your browser's address bar. Anyone opening the link will instantly load your exact configuration!

Testing and Mockups

A logo shouldn't just look good on a black grid; it has to look good on your website. Use the Mockups tab at the top of the screen to preview how your logo performs under real-world constraints:

• Business Card: Check legibility and spacing in print-like configurations.
• Mobile App Splash Screen: Validate branding when scaled down inside smartphone viewports.
• SaaS Header Navigation: View how the horizontal logo merges with typical dashboard layouts.
• SaaS Footer Branding: Preview color contrast when placed against dark footer containers.

Keyboard Shortcuts

Speed up your creative workflow with built-in hotkeys:

Frequently Asked Questions

Do I own the logos generated here?

Yes, absolutely. The exported SVG files are code instructions generated on your local machine. They contain public-domain or open-licensed vector shapes (e.g., MIT/ISC licensed icons) and standard fonts, meaning you can use them freely for personal, open-source, or commercial projects without attribution.

Why should I prefer SVG over PNG?

SVG (Scalable Vector Graphics) is resolution-independent. It uses mathematical coordinates instead of pixels. This means the logo will look razor-sharp on a 4K display, mobile screen, or giant billboard, and compiles to a tiny text file size (typically under 2KB), improving web loading speeds and SEO metrics.

Can I edit the logo in Figma or Illustrator?

Yes. Since we export standard SVGs, you can import them directly into Figma, Adobe Illustrator, Sketch, or Penpot. All paths, groups, and text elements remain fully editable.

Can I export high-resolution PNGs with transparent backgrounds?

Yes, definitely. When exporting a PNG, you can choose standard size presets (like standard 1024px, HD 2000px, or Ultra HD 4K 4000px) or set a custom width up to 5000px. If your canvas background is set to transparent or a custom color, the exported PNG will retain that transparency or styling perfectly at the selected resolution.

How can I make my logo stand out?

For high-performance startups, we recommend sticking to a **high-contrast monochrome palette** with a single vibrant accent color. Keep the typography clean (using fonts like Geist Sans) and ensure the icon size is proportionate to the text. Remember, a great logo is memorable, simple, and scales beautifully.