Electronics / Displays

LED Matrix Editor (8×8 and 16×16 Byte Array Generator)

Draw a picture or character on an 8×8, 8×16, or 16×16 LED dot matrix by clicking, and get the array of row values in hexadecimal or binary to paste into Arduino or other microcontroller code.

LED Matrix Editor (8×8 and 16×16 Byte Array Generator): Each row of the matrix becomes one number, with the leftmost dot in the highest bit: a row lit as .##..##. is 0x66. The array uses uint8_t for 8-dot rows and uint16_t for 16. Pasting an existing array in hexadecimal, binary, or decimal draws it back so you can change it. Runs 100% locally in your browser with zero server file uploads.

Category
School & study tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
LED matrix editorLocal processing

Runs entirely in your browser

Code

const uint8_t image[8] = {
  0x00,
  0x66,
  0xFF,
  0xFF,
  0x7E,
  0x3C,
  0x18,
  0x00
};
Load from code

Click or drag across the dots to draw. Each row becomes one number with the leftmost dot in the highest bit, the order most MAX7219 and LED matrix libraries expect for row-by-row display; if your matrix shows the picture mirrored or turned, flip the order in your code or rotate the drawing.

Using the array

With the common LedControl library for MAX7219 modules, a loop such as for (int row = 0; row < 8; row++) lc.setRow(0, row, image[row]); shows the picture.

For characters on a text LCD instead, use the LCD custom character generator.

Designing small images

At 8 × 8, simple outlines read best: a heart, an arrow, a smile, or a digit in a 5 × 7 box with a column of space. Keep strokes one dot wide.

To turn a photo into blocky pixel art instead, use the pixel art converter.

How to use it

  1. Choose the matrix size.
  2. Click or drag over the dots to draw; shift, invert, or clear as needed.
  3. Copy the code, or load an existing array to edit it.

Privacy & limitations

Everything runs in your browser.

Related tools

LCD CharacterPixel ArtASCII Table

Frequently asked questions

My picture shows up mirrored. Why?

Modules wire their rows and columns differently. Reverse the bit order or the row order in your code, or draw the picture mirrored here.

Can I make animation frames?

Draw each frame, copy its array, and play them one after another in your sketch.

Does it work with MAX7219 modules?

Yes: each row value can be sent to one of the MAX7219's digit registers, 1 to 8.

Free tool · runs in your browser · no account required