Logo

Import#

import { Logo } from '@volue/wave-react';

Examples#

Icon#

An icon is a symbol that represents a brand, but does not contain the name of the brand.

Wordmark#

A wordmark is a brand name styled as a logo, with a nine-faceted circle as the 'O'.

Sizes#

Logo comes in two sizes, with the medium size used by default. small size can be used in cases when there is limited space available or when rendering more compact layouts.

Responsive#

Logo supports responsive syntax for variant and size property, which means you can change its size based on the viewport.

With product name#

To display a logo alongside a product name in your application, use the built-in logo sub-components provided by App Header, App Bar, or Sidebar Navigation. These handle sizing, styling, and layout automatically.

API Reference#