Logo

Import#

import { Logo } from '@gemini-suite/vera-react';

Examples#

Icon#

An icon is a symbol that represents a product brand, but does not contain the name of the product. It should be used in cases where the primary logo is not suitable, for example on small screens or in areas with minimal space.

Logo with product name#

A wordmark is a product branded logo. The wordmark variant should be used when possible. There are two parts to the workmark. To the left is the product specific icon and to the right is the product name title in text that must be adjusted for the specific product.

This is an example showing the icon (Gemini Hydraulics) and the title text updated to the product name. The icon should be replaced with the correct one, and the title text should reflect the appropriate product name. You can find the available product logos below.

On dark background#

By default, the wordmark and icon inherit their colors from the parent element. On dark-coloured backgrounds such as backgroundNeutralContrast, logo should appear in navbar80 colour.

You can find more information about colors here.

Sizes#

Logo comes in three 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 size property, which means you can change its size based on the viewport.

Product icons#

Use product prop to render a specific product icon.

API Reference#