Alternate Logos

Some brands supply alternate logos for instances where the default logo cannot be used due to specific restrictions.

Installation

yarn add @iag/chroma-react-ui.components

Import

import { getLogo } from "@iag/chroma-react-ui.components";

Function

getLogo({
        brand, // set brand
        filename: "logo-alt-1.svg", // alternate logo filename
        variant: "light" // OPTIONS: light | dark (optional)
      });

Available Logos

Check the specific usage guidance and approval process for each alternate logo before implementing. Sizing provided below is a guide only and can be adjusted as required.

IAG

Please contact the IAG Brand team to discuss use of this alternate logo.

Logo Alt 1

Dimensions:

• Desktop: 64px x 64px
• Mobile: 44px x 44px

<img
  src={getLogo({ 
    brand: "iag", 
    filename: "logo-alt-1.svg" 
  })} 
  width="64" 
  height="64" 
  alt="IAG logo"
/>

NRMA

Please contact the Digital Design team at NRMADigitalDesign@iag.com.au to discuss use of these alternative logos.

Logo Alt 1 (mobile only)

For mobile use only, where the primary logo is required to be less than 40px in height. The size must not exceed 40px in height, for anything larger use the primary logo.

Dimensions:

• Mobile: 216px x 35px

<img
src={getLogo({ 
    brand: "nrma", 
    filename: "logo-alt-1.svg" 
  })} 
  width="216" 
  height="35" 
  alt="NRMA logo"
/>
<img 
  src={getLogo({ 
    brand: "nrma", 
    filename: "logo-alt-1.svg",
    variant: "light"
  })} 
  width="216" 
  height="35" 
  alt="NRMA logo"
/>
    

Logo Alt 2

For use where horizontal space is limited, such as favicons and app thumbnails. It can also be used for 3rd party applications. The size must not be smaller than 40px in height, for height under 40px (excluding favicons) use Logo Alt 3.

Dimensions:

• Desktop: 99px x 70px
• Mobile: 57px x 40px

<img 
  src={getLogo({ 
    brand: "nrma", 
    filename: "logo-alt-2.svg",
  })} 
  width="99" 
  height="70" 
  alt="NRMA logo"
/>
<img 
  src={getLogo({ 
    brand: "nrma", 
    filename: "logo-alt-2.svg",
    variant: "light"
  })} 
  width="99" 
  height="70" 
  alt="NRMA logo"
/>

Logo Alt 3 (mobile only)

For use on mobile only, where Logo Alt 2 is required to be less than 40px in height. The size must not exceed 40px in height, for anything larger use Logo Alt 2.

Dimensions:

• Mobile: 166px x 35px

<img
  src={getLogo({
    brand: "nrma",
    filename: "logo-alt-3.svg"
  })}
  width="166"
  height="35"
  alt="NRMA Logo"
/>
<img
  src={getLogo({
    brand: "nrma",
    filename: "logo-alt-3.svg",
    variant: "light"
  })}
  width="166"
  height="35"
  alt="NRMA Logo"
/>

Logo Alt 4 (mobile only)

For use on mobile splash screens only.

Dimensions:

• Mobile: 95px x 86px

<img
  src={getLogo({
    brand: "nrma",
    filename: "logo-alt-4.svg"
  })}
  width="95"
  height="86"
  alt="NRMA Logo"
/>
<img
  src={getLogo({
    brand: "nrma",
    filename: "logo-alt-4.svg",
    variant: "light"
  })}
  width="95"
  height="86"
  alt="NRMA Logo"
/>