Skip to content
Docs

Logo requirements

What Figure needs from your primary and square logos, and how to check them before you send them.

View as Markdown
On this page· 6 sections

Figure needs two logos from you: a wide primary logo for headers and a square logo for icons. Send both as SVG files so they stay crisp at every size.

Add both files below to check them against every requirement on this page and preview them on light, dark, and brand-colored headers.

Check your logos

Add both files to check them against every requirement below. They stay in your browser and are never uploaded.

Logo requirements#

Your primary logo will be displayed in the partner-facing application header and marketing materials. Please ensure the asset meets the following requirements:

  • Format: SVG (Scalable Vector Graphics)
  • Aspect ratio: The logo should maintain its original aspect ratio with a recommendation of 3:1 minimum (width:height)
  • Color: Provide a full-color version suitable for display on both light and dark backgrounds, or supply separate variants for each
  • File size: Keep the SVG file around 3kb or less for optimal loading performance
  • Text elements: All text must be converted to outlines/paths so the logo renders correctly without requiring custom fonts
Figure's primary logo
Example: a primary logo with a wide aspect ratio

Square logo requirements#

A square logo is used for compact placements such as favicons, mobile app icons, and thumbnail previews. Please ensure the asset meets the following requirements:

  • Format: SVG (Scalable Vector Graphics)
  • Aspect ratio: Must be 1:1 (square), with a recommended size of 192x192 pixels
  • Content: Typically an icon mark, monogram, or abbreviated version of the full logo
  • File size: Keep the SVG file around 3kb or less for optimal loading performance
  • Text elements: All text must be converted to outlines/paths
Figure's square logo
Example: a square logo mark

Recommendations#

The following recommendations help ensure your logo assets render cleanly and consistently across all placements.

SVG optimization#

Optimizing your SVG files reduces load time and avoids rendering inconsistencies:

  • Remove unnecessary metadata, comments, and editor-specific attributes (e.g., Illustrator or Figma artifacts)
  • Use a tool such as SVGO or Jake Archibald's SVGOMG to minify the file
  • Avoid embedded raster images (e.g., <image> tags with base64-encoded PNGs) inside the SVG — these defeat the purpose of a vector format
  • Prefer viewBox over explicit width/height attributes so the SVG scales fluidly

Internal container padding#

Try and remove as much internal container padding as possible to avoid having the logo appear too small.

A logo with lots of empty space around it inside its container
Avoid: lots of internal padding
A logo that fills its container with minimal padding
Prefer: minimal internal padding

Separate letters/components#

If your logo is composed of individual letterforms or distinct graphic components:

  • Keep each letter or component as a separate <path> or <g> (group) element within the SVG rather than merging everything into a single compound path
  • This preserves the ability to apply consistent spacing, alignment, and color treatments across different display contexts
A logo whose letters are separate SVG paths
Each letter is its own path

If you have any questions about logo specifications, please reach out to us at partner-help@figure.com.