Icons

Icons within the design system are used to visually represent an object or action to users.

See also <ns-icon>.

Decorative

Used as a visual aid for some functions, categories or actions. These are not used as a direct element of interaction themselves but can help to signify and support an action. It is recommended that these aren’t used in isolation and should be accompanied by a copy to add context.

There are two types of Decorative icons to choose from – solid or outline (the default is solid). Be mindful to maintain consistency when using in groups.

Functional

Used to show where an action needs to be taken. This includes components like buttons or controls. For instance, a button might include an arrow to give the user an indication of what will happen next or a download icon to show that the user will receive something by pressing it.

plus

minus

cross

arrow

chevron

chevron-down

download

external-link

tick

hide

hive

settings

loading

log-out

menu

search

show

switch

alert

alert-solid

alert-off

alert-off-solid

appliance

appliance-solid

bar-chart

bar-chart-solid

bill

bill-solid

boiler

boiler-solid

calendar

calendar-solid

clock

clock-solid

dual-fuel

dual-fuel-solid

electricity

electricity-solid

energy

energy-solid

error

error-solid

gauge

gauge-solid

gas

gas-solid

home

home-solid

info

info-solid

location

location-solid

magnifying-glass-circle

magnifying-glass-circle-solid

meter

meter-solid

payment

payment-solid

payment-plus

payment-plus-solid

piggy-bank

piggy-bank-solid

protect

protect-solid

question

question-solid

rewards

rewards-solid

spanner

spanner-solid

success

success-solid

tag

tag-solid

tariff

tariff-solid

trophy

trophy-solid

user

user-solid

user-circle

user-circle-solid

warning

warning-solid

chevron-right

arrow-right

arrow-left

chevron-left

chevron-up

alert-outline

alert-off-outline

appliance-outline

bar-chart-outline

bill-outline

boiler-outline

calendar-outline

clock-outline

dual-fuel-outline

electricity-outline

energy-outline

error-outline

gauge-outline

gas-outline

home-outline

info-outline

location-outline

magnifying-glass-circle-outline

meter-outline

payment-outline

payment-plus-outline

piggy-bank-outline

protect-outline

question-outline

rewards-outline

spanner-outline

success-outline

tag-outline

tariff-outline

trophy-outline

user-outline

user-circle-outline

warning-outline

Adding new icons

If you have a requirement for an additional icon please see our step-by-step guidelines for contributing a new icon or illustration.

Illustrations

Illustrations are used to bring the warmth of the British Gas brand personality to the website.

See also <ns-illustration>.

appliance

appliance-cover

appliance-repair

air-source-heat-pump

bar-graph

battery

boiler

boiler-cover

boiler-repair

boiler-service

bulb

calendar

calendar-selected-date

central-heating

chat

chat-round-clock

checklist

circle-tick-blue

clock

compass

cosmo

dashboard

dishwasher

document

document-in-envelope

dual-fuel

electrics

electric-charger

electric-charging-station

electric-vehicle

engineer-long-hair

engineer-short-hair

engineer

error

factory

fix

fixed-s-a

fixed-sa

fridge-freezer

gas

gas-fire

green-leaf

help

hob

home

home-solar-panel-green

home-insurance

home-service

laptop

low-carbon

magnifying-glass

meter

multiple-people

oven

payments

payment-card

phone

pipe-and-drain

privacy-settings

protect

radiator

rosette-tick-green

savings

savings-calculator

settings

shop

sms

socket-plug

solar-panel

stacked-graph

tap

tariff-clock

tariff-electric-charger

tariff-lock

tariff-magnifying-glass

tariff-stacked-graph

track-engineer

trophy

van

warning

water-drips

whats-app

yellow-shield

Adding new illustrations

If you have a requirement for an additional illustration please see our step-by-step guidelines for contributing a new icon or illustration.

Images

Aspect ratios

There are three aspect ratios – 1 / 1, 4 / 3 and 16 / 9, which we use in various ways. Take a considered approach and do not overload with too many variants.

Responsive rules

For all aspect ratios the images scale proportionally so they will not distort.

Placeholder images

These placeholder images can help visualise the image proportions and determine a focal point and ideal file size. It is recommended to use the WebP file type for optimal quality and size.

480x360px

Placeholder	Ratio	Size	File type
	4 / 3	< 25kb	WebP

640x360px

Placeholder	Ratio	Size	File type
	16 / 9	< 25kb	WebP

640x480px

Placeholder	Ratio	Size	File type
	4 / 3	< 25kb	WebP

640x640px

Placeholder	Ratio	Size	File type
	1 / 1	< 25kb	WebP

360x450px

Placeholder	Ratio	Size	File type
	4 / 5	< 25kb	WebP

720x405px

Placeholder	Ratio	Size	File type
	16 / 9	< 50kb	WebP

720x540px

Placeholder	Ratio	Size	File type
	4 / 3	< 50kb	WebP

720x540px horizon

This placeholder is used specifically for the horizon landmark.

Placeholder	Ratio	Size	File type
	4 / 3	< 50kb	WebP

800x450px

Placeholder	Ratio	Size	File type
	16 / 9	< 50kb	WebP

800x600px

Placeholder	Ratio	Size	File type
	4 / 3	< 50kb	WebP

800x800px

Placeholder	Ratio	Size	File type
	1 / 1	< 50kb	WebP

1440x810px summit

This placeholder is used specifically for the summit landmark.

Placeholder	Ratio	Size	File type
	16 / 9	< 100kb	WebP