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.componentsImport
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"
/>