> ## Documentation Index
> Fetch the complete documentation index at: https://docs.octav.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# Logo Files

> Download official Octav logos and brand assets

Download official Octav logos and brand assets in various formats.

<Info>
  By downloading these assets, you agree to follow our [brand guidelines](/docs/brand-guidelines) and use them appropriately.
</Info>

***

## Logo Variations

### Primary Logos

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
  <div>
    <div className="p-8 bg-gray-900 border border-gray-700 rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_light.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=eb48c0f5c88793f460076f8e162dafae" alt="Octav Bevel Logo Light" className="w-full h-auto" width="493" height="123" data-path="logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_light.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Bevel Logo (Light)</h4>
    <p className="text-sm text-gray-600 mb-3">Primary logo with bevel effect for depth and dimension</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Marketing materials, website headers, presentations, print materials</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_light.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_locotype_Bevel_light.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>

  <div>
    <div className="p-8 bg-gray-100 border rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_Dark.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=92ecab53de45f28f5c467ce220e93423" alt="Octav Bevel Logo Dark" className="w-full h-auto" width="493" height="123" data-path="logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_Dark.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Bevel Logo (Dark)</h4>
    <p className="text-sm text-gray-600 mb-3">Primary logo with bevel effect for dark backgrounds</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Dark backgrounds, dark mode applications</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_locotype_Bevel_Dark.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_locotype_Bevel_Dark.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
  <div>
    <div className="p-8 bg-gray-900 border border-gray-700 rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Light.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=d9962d56390b9c6e1ee3ad925e4b20cc" alt="Octav Solid Logo Light" className="w-full h-auto" width="497" height="123" data-path="logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Light.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Solid Logo (Light)</h4>
    <p className="text-sm text-gray-600 mb-3">Simplified solid version without bevel effect</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Small sizes, embroidery, engraving, single-color applications, favicons</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Light.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_locotype_Solid_Light.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>

  <div>
    <div className="p-8 bg-gray-100 border rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Dark.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=b447f23d4793c0eeca272ac8e6aa8ece" alt="Octav Solid Logo Dark" className="w-full h-auto" width="497" height="123" data-path="logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Dark.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Solid Logo (Dark)</h4>
    <p className="text-sm text-gray-600 mb-3">Simplified solid version for dark backgrounds</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Small sizes on dark backgrounds, dark mode</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_locotype_Solid_Dark.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_locotype_Solid_Dark.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>
</div>

***

### Icon Marks

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
  <div>
    <div className="p-8 bg-gray-900 border border-gray-700 rounded-lg mb-4 flex items-center justify-center">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_logo_icon_Light.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=756282718efdd2aa911d71d41c84a0d8" alt="Octav Icon" className="w-32 h-32" width="445" height="373" data-path="logo/Octav_Logo_Pack/SVG/Octav_logo_icon_Light.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Icon</h4>
    <p className="text-sm text-gray-600 mb-3">Standalone "O" icon mark for app icons and small applications</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> App icons, favicons, social media profile images, small UI elements</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_logo_icon_Light.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_logo_icon_Light.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>

  <div>
    <div className="p-8 bg-gray-100 border rounded-lg mb-4 flex items-center justify-center">
      <img src="https://mintcdn.com/octav-0131e508/2NMEPTfdgJ6_kBbR/logo/Octav_logo_icon_red@2x.png?fit=max&auto=format&n=2NMEPTfdgJ6_kBbR&q=85&s=d58eac966f24e31a99fc78e6d05765f0" alt="Octav Icon Red" className="w-32 h-32" width="890" height="745" data-path="logo/Octav_logo_icon_red@2x.png" />
    </div>

    <h4 className="font-semibold mb-2">Octav Icon (Red)</h4>
    <p className="text-sm text-gray-600 mb-3">Red variant of the "O" icon mark</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Brand accent applications, special marketing materials, favicon</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_logo_icon_red.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_logo_icon_red@2x.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
  <div>
    <div className="p-8 bg-gray-100 border rounded-lg mb-4 flex items-center justify-center">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_top.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=b60f56e951a9f71c1194add1b7c152b7" alt="Octav Icon Top View" className="w-32 h-32" width="532" height="385" data-path="logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_top.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Icon (Top View)</h4>
    <p className="text-sm text-gray-600 mb-3">Top-down view of the "O" icon</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Alternative icon placement, decorative elements</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_top.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_icon_lookup_top.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>

  <div>
    <div className="p-8 bg-gray-100 border rounded-lg mb-4 flex items-center justify-center">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_side.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=2f751decefa803b78fccfab1e7325c2e" alt="Octav Icon Side View" className="w-32 h-32" width="828" height="208" data-path="logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_side.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Icon (Side View)</h4>
    <p className="text-sm text-gray-600 mb-3">Side-facing "O" icon with unique perspective</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Alternative icon placement, decorative elements, special applications</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_icon_lookup_side.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_icon_lookup_side.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>
</div>

***

### Product Logos

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-8">
  <div>
    <div className="p-8 bg-gray-900 border border-gray-700 rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_Pro_light.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=9fe783a4d8fbffee126eeb01c0df333d" alt="Octav Pro Logo" className="w-full h-auto" width="996" height="181" data-path="logo/Octav_Logo_Pack/SVG/Octav_Pro_light.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav Pro Logo</h4>
    <p className="text-sm text-gray-600 mb-3">Official Octav Pro product logo</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> Octav Pro marketing, product pages, promotional materials</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_Pro_light.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_Pro_light.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>

  <div>
    <div className="p-8 bg-gray-900 border border-gray-700 rounded-lg mb-4">
      <img src="https://mintcdn.com/octav-0131e508/2gyC7pExzkUX19Dg/logo/Octav_Logo_Pack/SVG/Octav_API_light.svg?fit=max&auto=format&n=2gyC7pExzkUX19Dg&q=85&s=5b4bc2164678b16ebaf1c4b055372d05" alt="Octav API Logo" className="w-full h-auto" width="995" height="181" data-path="logo/Octav_Logo_Pack/SVG/Octav_API_light.svg" />
    </div>

    <h4 className="font-semibold mb-2">Octav API Logo</h4>
    <p className="text-sm text-gray-600 mb-3">Official Octav API product logo</p>
    <p className="text-sm text-gray-600 mb-3"><strong>When to use:</strong> API documentation, developer resources, technical materials</p>

    <div className="flex gap-2 flex-wrap">
      <a href="/logo/Octav_Logo_Pack/SVG/Octav_API_light.svg" download className="primary-button">
        Download SVG
      </a>

      <a href="/logo/Octav_Logo_Pack/PNG/Octav_API_light.png" download className="primary-button">
        Download PNG
      </a>
    </div>
  </div>
</div>