Key Features at a Glance
logoname combines professional design guardrails with a powerful, developer-friendly interface. Here are the core modules that make it unique.
1. Four-Way Layout Modes
Instantly switch between **Horizontal** (perfect for navbars), **Vertical** (ideal for mobile, badges, and print), **Icon-Only** (for favicons and app icons), and **Text-Only** (for pure wordmark logos). The engine handles all padding recalculations on the fly.
2. 150k+ Icon Search Engine
Type any query to search a vast library of open-source vector graphics. We integrate icons from **Lucide**, **Radix**, and **Heroicons** to ensure you find exactly the right symbol for your startup. Curated local presets are also available for quick starts.
3. Custom SVG Icon Upload
Need to use your own brand mark? Drag and drop your custom SVG files directly into the editor. Choose whether to adapt the icon's color palette to your theme colors dynamically, or keep the original asset colors intact.
4. Cohesive Color Vibes
Choose from four distinct presets (Minimalist Tech, Corporate Professional, Sunny Playful, Creative Rose) that configure color maps, typography pairings, and element ratios designed to communicate trust, energy, or elegance.
5. Live Mockup Validation
Stop guessing. Switch to the Mockups tab to see your logo inside a mobile app splash screen, on a business card, and embedded in SaaS Navbars or Footers. The logo updates automatically as you change text or colors in the editor.
6. Canvas Aspect Ratio Engine
Instantly adapt your workspace to model real-world layout contexts. Swap dynamically between **1:1 Square** (standard branding), **16:9 Wide** (hero headers and presentations), **3:1 Banner** (marketing headers/SaaS spaces), and **4:5 Tall** (mobile packaging and layouts).
7. Multi-Res PNG Export Presets
Export high-quality raster versions with pre-calibrated sizes. Instantly select **Favicon** (32x32px), **Social Profile** (512x512px), **Standard Web** (1024x1024px), **High-Res HD** (2000x2000px), or **Ultra HD 4K** (4000x4000px) with single-click triggers.
8. Custom Sizing Slider
Need a specific resolution? Toggle Custom Size to reveal a fine-grained slider interface. Adjust PNG output dimensions freely from **16px to 5000px** (in 16px steps) to fit any website or layout context perfectly.
9. Real-time Contrast Tester
Verify your design's visibility against multiple backdrops before saving. Tap standard Default, White, Black, or custom Brand background states to test readability instantly without affecting the transparency or coordinates of the final exported file.
10. Fine-Tuned Typography
Fine-tune wordmark typography with dedicated letter-spacing (tracking) and font-weight controls. Set weight from Thin (100) to Black (900) and tracking from -5px to 25px for perfect optical balance.
11. Mesh Gradients & Patterns
Add premium, eye-catching backgrounds for avatar exports. Select custom mesh gradients (Sunset, Aurora, Candy, Cosmic, Noir) and overlay them with high-end patterns (Dots, Grid, Stripes, Waves) with full color and opacity control.
12. URL State Sharing
Share your logo designs instantly. The editor compresses and serializes your exact configuration live into the URL parameters, meaning your work is always shareable with a simple copy-paste of the address link.
Advanced Technical Engine Specifications
Real-Time SVG Renderer
The editor uses standard browser SVG node hierarchies. As you modify slides (for spacing, sizing, color values), Javascript compiles these values into SVG parameters (attributes like font-size, fill, stroke-width, and viewBox). This avoids performance lag and renders your design in 60fps.
Undo History Buffer
Every change you make (text edits, font updates, color selections, layouts) is stored inside a localized state undo buffer using Nanostores. You can reverse actions easily via the **Undo** button in the sidebar or using standard keyboard shortcuts (Cmd+Z or Ctrl+Z).
Clean Export Code
Unlike Adobe Illustrator or Figma which add junk layers, editor tags, and metadata overhead to SVGs, logoname compiles lean, lightweight vector code.
- Fills are cleaned up into inline classes or style parameters.
- Vectors use clean groups (
<g>) to wrap text and shapes. - The background rect can be disabled (transparent) during export to ensure clean website integration.
- Output files average less than **2 Kilobytes** in size.
Keyboard-Driven Optimization
Designed with developer-centric speed in mind. Standard system shortcuts are mapped:
Ctrl+S/Cmd+S: Instantly exports the logo file directly to your downloads.Ctrl+Z/Cmd+Z: Reverts the last layout or aesthetic modification.Ctrl+E/Cmd+E: Toggles between the canvas editor and the product mockups.Ctrl+K/Cmd+K: Open command palette search and quick layout actions.