BBC Weather Symbols

The ‘traditional’ weather symbol set

For the 2005 redesign I revisited the traditional BBC symbols and produced a completely new redrawn set. They are based very closely on the versions originally designed by Mark Allen in 1974 and subsequent revisions by BBC graphic designers.

bbc weather symbols 2005

The Weather Centre use a set of codes to represent various meteorological scenarios. For many years these have been shown graphically using the familiar ‘fluffy cloud’ icons on weather maps. They were rarely seen on national TV after the 2005 redesign, but this weather symbol set survived for a number of years in places on the BBC’s weather website.

Here is a list of the codes and the associated ‘old school’ BBC Weather symbol that was used for each weather type.

  • 1:   sunny day
  • 2:   partly cloudy (night)
  • 3:   sunny intervals
  • 7:   white medium level cloud
  • 8:   black low level cloud
  • 9:   light rain shower (night)
  • 10: light rain shower (day)
  • 11: drizzle
  • 12: light rain day or night
  • 13: heavy rain shower (night)
  • 14: heavy rain shower (day)
  • 15: heavy rain
  • 16: sleet shower (night)
  • 17: sleet shower (day)
  • 18: cloudy with sleet
  • 19: hail shower (night)
  • 20: hail shower (day)
  • 21: cloudy with hail
  • 22: light snow shower (night)
  • 23: light snow shower (day)
  • 24: cloudy with light snow
  • 25: heavy snow shower (night)
  • 26: heavy snow shower (day)
  • 27: cloudy with heavy snow
  • 28: thundery shower (night)
  • 29: thundery shower (day)
  • 30: thunderstorms

The remainder have been represented variously by plain text or images. They are :

  • 0: clear sky (night)
  • 4: sandstorm
  • 5: mist day / night
  • 6: fog day / night
  • 31: tropical storm
  • 32: hazy

The ‘new’ weather symbol set

Also as part of the 2005 redesign I looked at developing a new set of weather symbols to tie in more closely with the more ‘realistic’ representations of weather types that appear now on the TV weather maps.

The first images were built up from a basic set of backgrounds e.g. half white cloud, day and night, full cloud (white and grey) etc. I made animated overlays in After Effects to show light and heavy rain, snow, sleet etc. Below is a static test sheet showing the 33 weather codes using the new symbols.

weather symbols : new BBC weather symbol set

You might spot that the ‘sunny day’ icon (1) is a blue square with no yellow sun and there’s also no sun peeping out from behing the clouds in (3). There are also probably a few other minor differences between my versions here and the ones that ended up appearing on the BBC’s weather website.

These new weather symbols were initially designed for a very specific function – to combine the cloud symbol and temperature disc into a single square area to use on outlook charts and city league tables on TV forecasts. The centre of each panel would always include a colour-coded temperature disc (hence no ‘sun’, just blue sky). The images themselves would also always be animating – so for example, the difference between hail (falling quickly and vertically downwards) and snow (drifting more slowly and diagonally) is clearer.

weather icons - new weather symbols on website
weather icons - new weather symbols on outlook graphic

At some point it was decided to use these animating symbols on the BBC Weather home page. Each animation existed as a set of single frames designed to run at 25fps for broadcast. Below left is an example of how ‘light snow showers’ appeared on the BBC Weather website. I guess to keep the file size down they chose to drop some frames from the original animation which made for a slightly jerky end result I think. I’ve just had a go myself to see if I can improve on it – my own version is on the right.

animated weather symbol   animating weather symbol

I’ve used a bit of motion blur, sacrificed some detail in the cloud and tried to make the highlight on the cloud background a tiny bit darker than the snowflakes. I have also ditched the dithering to keep the file size down. I’ve ended up using a color table with more colours, but by optimising the animation I’ve gained some extra frames to make it a little smoother. Perhaps with a little bit more tweaking of the colour table, I could maybe bring a bit more detail back into the cloud with one or two more intermediate greys. Anyway, both images weigh in at around 28kB, but mine is a few hundred bytes smaller. The rain symbols require fewer frames of animation, so they would have been smaller still.

There are some other ways of getting the same effect. I did experiment with something a bit more sophisticated here – seamlessly looping weather icons using jQuery and Spritely. But in the end, returned to the GIF format for these animated weather icons like the examples below.

realistic weather icons realistic weather icons realistic weather icons realistic weather icons

You can buy this particular set of weather icons – Animated Weather Icon Set : RE-03, and many others, in my Weather Icon Store.

Symbols on the BBC Weather website

The old ‘cartoon’ weather symbols somehow survived in long-range forecast tables for many years following the 2005 rebrand.The ‘new’ BBC weather symbols above finally replaced the ‘traditional’ symbol set on the BBC’s Weather Beta site which appeared in 2008.

symbols on the BBC Weather website (left), and Beta site (right)

The temperatures are now displayed separately as text, and each symbol has a text description below a static image. The site-specific data appears in two expandable tables, one showing detail over the next 24 hours, and one showing the forecast for the next 4 days. There are toggles for wind, humidity, pressure and visibility, and the night-time data has also been separated out.


See also

BBC Weather Graphics

BBC weather graphics


See also (external links)