Design Tokens for Mesh have just been released!
Skip to content

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

Brands

This component looks to the ThemeProvider to know which brand logo is rendered. As such, it must be used inside our Theme component.

Installation

bash
npm install @nib-components/logo

Usage

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

Interactive demo

jsx

Props

PropTypeDefaultDescription
sizestringsmallThe size (height) of the logo. The small value varies across brands as per the minimum height specified in the respective brand guidelines. medium (48px) and large (64px) sizes are consistent across brands. Must be one of 'small', 'medium' or 'large'.
invertbooleanfalseIs the logo to be used on a dark background? Try setting this to true.

Color

Preference should be given to use the default color. Though if required, our logo can be rendered as white for use on darker backgrounds (green or black), through the use of the invert prop.

Padding

The padding around the logo should, at a minimum, be at least as thick as the width of 'i' in the nib logo. If using a reversed logo (white), a minimum 10px padding on all sides of the logo should be included.

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.