The LED Matrix

One-sentence summary

The 5×5 LED matrix on the front of the micro:bit is the most basic way to show text, numbers, icons and simple animations using its 25 tiny lights, which we can switch on one by one.

Why does it matter?

When you first pick up a micro:bit, the thing you notice is the square arrangement of red lights on the front. This arrangement is called the LED matrix. The matrix works like a small screen on a computer: it turns the result of our program into something a person can actually see.

It is nice when a robot measures a distance or a button gets pressed, but if we cannot see the result, we have no idea what is happening. The LED matrix is how the board "talks" to us. When you are new to coding, seeing the value of a variable on the screen also makes finding mistakes much easier.

In this lesson we will look at how the matrix is arranged, the built-in icons, showing text and numbers, lighting single LEDs and a simple animation idea, using both MakeCode blocks and MicroPython.

How does the 5×5 matrix work?

The matrix is a grid of 5 rows and 5 columns. That makes 25 LEDs in total. We can turn each LED on and off separately. When an LED is on, that dot glows; when it is off, the dot goes dark. When enough dots glow together, a letter, digit or shape appears.

Thinking in coordinates

Every LED has an address. We give this address with two numbers: x (the column, left to right) and y (the row, top to bottom). Counting starts at 0.

     x=0  x=1  x=2  x=3  x=4
y=0   .    .    .    .    .
y=1   .    .    .    .    .
y=2   .    .    .    .    .
y=3   .    .    .    .    .
y=4   .    .    .    .    .

The top-left corner is (0, 0) and the bottom-right corner is (4, 4). The LED in the very middle is at (2, 2). This idea is like naming a square "e4" on a chessboard: every cell has one clear name.

Brightness

LEDs are not only on or off; they also have a brightness level. In MakeCode you can set a value between 0 (dark) and 255 (brightest). This is useful when you want a light to fade in and out during an animation.

Showing built-in icons

The easiest place to start is the icons that already come with the micro:bit. A heart, a happy face, an arrow and many other pictures are in the library. We can put them on the screen with a single line.

MakeCode block sequence:

on start
  show icon (heart)

The same idea in MicroPython:

from microbit import *

display.show(Image.HEART)

Instead of Image.HEART you can also write other ready-made pictures such as Image.HAPPY, Image.YES or Image.ARROW_N. Showing a different icon when a button is pressed is the topic of the next lesson; for now, seeing one fixed icon as soon as the board turns on is enough.

Everyday example: A mood badge

Imagine a badge pinned to your collar. A badge that shows a happy face when you feel good and a flat line when you feel thoughtful can be built exactly with a micro:bit. If you show Image.HAPPY when the board starts, you get a small wearable "mood screen."

Showing text and numbers

Because the matrix is only 5×5, one letter fits but a whole word does not. So text scrolls: letters enter from the left and leave on the right, just like the moving messages on stadium boards.

Scrolling with "show string"

In MakeCode the "show string" block automatically scrolls a message:

on start
  show string ("HELLO")

MicroPython has two different commands. scroll moves the text across, while show displays a single character in place:

from microbit import *

display.scroll("HELLO")
display.show("A")

Showing numbers

Writing a value measured by a sensor onto the screen is very handy. MakeCode has a "show number" block:

forever
  show number (temperature)

In MicroPython you can scroll the number directly:

from microbit import *

while True:
    display.scroll(temperature())

A single-digit number (such as 7) stays still without scrolling; a multi-digit number (such as 25) does not fit on the matrix, so it scrolls across.

Everyday example: A step-counter display

In later modules we will count steps with the accelerometer. Showing the counted number with display.scroll turns the board into a small sports display. The screen's job is always the same: making a number that lives inside the board visible to your eyes.

Lighting single LEDs and animation

Sometimes a built-in icon is not enough and we want to draw our own shape. Then we light each LED by its address. MakeCode has "plot" and "unplot" blocks for this.

Drawing with plot

Let us light the top-left and bottom-right corners:

on start
  plot x=0 y=0
  plot x=4 y=4

In MicroPython you use set_pixel(x, y, brightness). Brightness is between 0 and 9:

from microbit import *

display.set_pixel(0, 0, 9)
display.set_pixel(4, 4, 9)

Animation idea: A moving dot

An animation is a series of frames that change quickly. If we light a dot, wait a short moment, turn it off and then light the next dot, the light looks like it is sliding.

MakeCode logic:

forever
  for x from 0 to 4
    plot x=x y=2
    pause 100 ms
    unplot x=x y=2

The MicroPython version:

from microbit import *

while True:
    for x in range(5):
        display.set_pixel(x, 2, 9)
        sleep(100)
        display.set_pixel(x, 2, 0)

The idea here is the same as before: light, wait, turn off, move to the next address. Changing the waiting time speeds the animation up or slows it down.

Mini practice

Goal: Write a program that runs a short "opening show" when the board turns on.

Follow these steps:

1. On start, scroll the text "HI".
2. Then show the heart icon.
3. Wait 500 ms.
4. Light the middle LED (2, 2), wait 300 ms, then turn it off.

MakeCode block sequence:

on start
  show string ("HI")
  show icon (heart)
  pause 500 ms
  plot x=2 y=2
  pause 300 ms
  unplot x=2 y=2

The MicroPython version:

from microbit import *

display.scroll("HI")
display.show(Image.HEART)
sleep(500)
display.set_pixel(2, 2, 9)
sleep(300)
display.set_pixel(2, 2, 0)

Once you see it working, change things by trying: replace the text with your own name, pick a different icon, or move the lit LED to a corner.

Common mistakes

Counting coordinates from 1

The matrix starts at (0, 0). The bottom-right corner is (4, 4), not (5, 5). An address like (5, 2) falls off the screen, so nothing lights up.

Mixing up x and y

The first number is the column (horizontal), the second is the row (vertical). (0, 4) is the bottom-left corner, while (4, 0) is the top-right. Those are two very different places.

Confusing show and scroll

If you try to display a multi-character message with display.show("HELLO"), only the first letter stays visible. Use scroll for long text and show for a single character or icon.

Forgetting the wait

If you light an LED and turn it off immediately, your eye cannot catch it. In an animation you need a sleep/pause between each step; otherwise the screen looks empty.

Safety note

• When connecting the micro:bit to a computer with the USB cable, insert it gently and straight; do not force the connector.
• Attach the battery pack (usually two AAA batteries) only with an adult's help and with the poles (+/–) the right way around. Do not short the batteries, and do not touch them if they get warm.
• The micro:bit runs on low voltage; never connect it to mains electricity or high voltage.
• If you build a wearable badge, fasten the board and battery to the clothing securely and cover any sharp edges. Keep small parts away from younger siblings.

Lesson summary

• The 5×5 LED matrix on the front of the micro:bit is made of 25 lights and is the board's output screen.
• Each LED has an (x, y) address; counting starts at 0 and the centre is (2, 2).
• Built-in icons are shown in one line with show icon / display.show(Image.HEART).
• Long text and multi-digit numbers scroll across, using scroll.
• plot / set_pixel light single LEDs; a light–wait–turn-off sequence makes a simple animation.

Check questions

1. How many rows, how many columns and how many LEDs in total does the matrix contain?
2. Which corners do the addresses (0, 0) and (4, 4) correspond to?
3. What is the difference between display.show and display.scroll?
4. In MicroPython's set_pixel(x, y, brightness), what range of values can brightness take?
5. To make a dot move across the matrix, which two steps must come after lighting a single LED?

Answers

1. It contains 5 rows, 5 columns and 25 LEDs in total.
2. (0, 0) is the top-left corner; (4, 4) is the bottom-right corner.
3. show displays a single character or icon in place; scroll moves the text from left to right, which is why it is used for longer text.
4. Between 0 and 9; 0 means off and 9 means brightest. (The MakeCode "plot" block works as on/off, while its separate brightness block uses the 0–255 range.)
5. A short pause/sleep, and then turning that LED off with unplot/set_pixel(..., 0); after that the next address is lit.

Source and verification note

For “The LED Matrix”, verification focuses on whether the relationship between How does the 5×5 matrix work? and Brightness remains consistent across examples. MakeCode and MicroPython names can vary slightly by version. Test in the simulator first; when external components are connected, check the board’s pin and voltage limits separately.

Next lesson

Buttons and Events: We will write our first interactive micro:bit programs that change the screen when buttons A and B are pressed.