Skip to content
Design Tokens for Mesh have just been released!
Check out the design tokens now

The Logo component is used to render an nib brand logo on screen.

Brands

The default export from this package looks to the ThemeProvider to know which brand logo to render. As such, it must be used inside our Theme component.

Installation

bash
npm install @nib-components/logo

Usage

There are two primary ways to use the Logo component, depending on your application's branding requirements.

Named imports

Import a Specific Logo (Recommended for Single/fewer Brand Apps). If your application targets a single/fewer brands, you can import that logo directly. This approach helps reduce bundle size and it is the recommended approach.

jsx
import NibLogo from '@nib-components/logo/nib';

Or if you support a few brands:

jsx
import NibLogo from '@nib-components/logo/nib';
import GuLogo from '@nib-components/logo/gu';
import ImanLogo from '@nib-components/logo/iman';
import {useContext} from 'react';
import {ThemeContext} from 'styled-components';
const Logo = () => {
const theme = useContext(ThemeContext);
switch (theme.id) {
case 'gu':
return <GuLogo />;
case 'iman':
return <ImanLogo />;
default:
return <NibLogo />;
}
};

Note: If you're using a named import, it won't be mode-aware by default. You'll need to explicitly set the desired color and variation to match your application's requirements.

Default import

For applications that support multiple brands or themes, use the default Logo component. It dynamically renders the correct logo based on the current theme or context.

jsx
import Logo from '@nib-components/logo';

Interactive demo

jsx
<Logo size="small" />

Props

PropTypeDefaultDescription
sizestringsmallSets the size (height) of the logo. Must be one of 'small', 'medium' or 'large'. Width is calculated programmatically, according to a set aspect ratio. Height values are set via design-tokens, and according to respective brand guidelines.
variationstringOverrides the default logo variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens.
colorstringOverrides the default color variation set by design-tokens. Available options vary per brand, shown in the table below. If the selected variation does not exist for a given brand, it will revert to the default value set by design-tokens.

Supported color & variation

BrandVariationColor
aamidefaultmonoLight, default
aanzdefaultonBrand, default
apiadefaultmonoLight, default
australianSeniorsdefaultonDark, default
cotadefaultonBrand, default
edidefaultonBrand, default
foundationdefault, stackeddefault, brightGreen
gudefaultonDark, default
imandefaultonDark, default
ingdefaultonBrand, default
nibdefaultdefault, brightGreen
nsidefaultonDark, default
pricelinedefaultonBrand, default
qantasdefault, reducedonDark, default
realdefaultonDark, default
suncorpdefaultonDark, default
tiddefaultonBrand, onDark, default
worldNomadsdefault, stacked, sanchezonDark, default
orbitProtectdefaultonDark, default

This page is for information about our Logo component and its usage. For general information about branding at nib as well as downloadable logo packs for print and screen, please see the Logos page.