How to use icons in cells

Render an icon from the icon pack inside a cell, and wire up an icon-only control so it stays accessible to screen reader users.

Prerequisites

A grid with a custom cell renderer.
The @handsontable/spreadsheet-icons package, or any inline SVG icon of your own.
For the third-party icon set section, a Lucide package.

Steps

Install the icon pack.
Terminal window
```
1
npm install @handsontable/spreadsheet-icons
```
You can also copy a single icon’s SVG markup directly from the icon pack page — click any icon in the catalog to copy its name, then look up its markup in the downloaded package.
Render the icon inside a custom renderer.

Build the icon markup once, then swap it into the cell based on the cell’s value. This example renders a “flag” icon that toggles between a filled and an empty state.
Add an accessible name to the control, not the icon.

The icon itself — an inline <svg> — has no accessible name. If you wrap it in a clickable element (a <button>, or a <div> with role="button"), set aria-label on that element instead, and update it whenever the icon’s state changes.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const data = [
8
  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },
9
  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },
10
  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },
11
  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },
12
  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },
13
];
14

15
// Icons from the `@handsontable/spreadsheet-icons` package - see the "Icon
16
// pack" reference page for the full set.
17
// `currentColor` picks up the button's text color, so the icon stays visible
18
// in both light and dark themes instead of a hardcoded color disappearing
19
// against the background.
20
const FLAG_FULL_ICON =
21
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z"/></svg>';
22
const FLAG_EMPTY_ICON =
23
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" opacity="0.6"><path d="M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z"/></svg>';
24

25
const ExampleComponent = () => {
26
  // The icon itself has no accessible name, so the button carries an
27
  // `aria-label` that describes what clicking it does.
28
  const flagRenderer = (instance, td, row, _col, _prop, value) => {
29
    const taskName = String(instance.getDataAtCell(row, 0));
30
    const button = document.createElement('button');
31

32
    button.type = 'button';
33
    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';
34
    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;
35
    button.setAttribute(
36
      'aria-label',
37
      value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`,
38
    );
39
    button.addEventListener('click', () => {
40
      instance.setDataAtCell(row, 3, !value);
41
    });
42

43
    td.innerText = '';
44
    td.appendChild(button);
45

46
    return td;
47
  };
48

49
  return (
50
    <HotTable
51
      data={data}
52
      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}
53
      columns={[
54
        { data: 'task' },
55
        { data: 'assignee' },
56
        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },
57
        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },
58
      ]}
59
      height="auto"
60
      autoWrapRow={true}
61
      autoWrapCol={true}
62
      licenseKey="non-commercial-and-evaluation"
63
    />
64
  );
65
};
66

67
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import Handsontable from 'handsontable/base';
3
import { registerAllModules } from 'handsontable/registry';
4
import type { BaseRenderer } from 'handsontable/renderers';
5

6
// Register all Handsontable's modules.
7
registerAllModules();
8

9
interface Task {
10
  task: string;
11
  assignee: string;
12
  dueDate: string;
13
  flagged: boolean;
14
}
15

16
const data: Task[] = [
17
  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },
18
  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },
19
  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },
20
  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },
21
  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },
22
];
23

24
// Icons from the `@handsontable/spreadsheet-icons` package - see the "Icon
25
// pack" reference page for the full set.
26
// `currentColor` picks up the button's text color, so the icon stays visible
27
// in both light and dark themes instead of a hardcoded color disappearing
28
// against the background.
29
const FLAG_FULL_ICON =
30
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z"/></svg>';
31
const FLAG_EMPTY_ICON =
32
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" opacity="0.6"><path d="M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z"/></svg>';
33

34
const ExampleComponent = () => {
35
  // The icon itself has no accessible name, so the button carries an
36
  // `aria-label` that describes what clicking it does.
37
  const flagRenderer: BaseRenderer = (
38
    instance: Handsontable,
39
    td: HTMLTableCellElement,
40
    row: number,
41
    _col: number,
42
    _prop: string | number,
43
    value: Handsontable.CellValue
44
  ) => {
45
    const taskName = String(instance.getDataAtCell(row, 0));
46
    const button = document.createElement('button');
47

48
    button.type = 'button';
49
    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';
50
    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;
51
    button.setAttribute(
52
      'aria-label',
53
      value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`
54
    );
55
    button.addEventListener('click', () => {
56
      instance.setDataAtCell(row, 3, !value);
57
    });
58

59
    td.innerText = '';
60
    td.appendChild(button);
61

62
    return td;
63
  };
64

65
  return (
66
    <HotTable
67
      data={data}
68
      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}
69
      columns={[
70
        { data: 'task' },
71
        { data: 'assignee' },
72
        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },
73
        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },
74
      ]}
75
      height="auto"
76
      autoWrapRow={true}
77
      autoWrapCol={true}
78
      licenseKey="non-commercial-and-evaluation"
79
    />
80
  );
81
};
82

83
export default ExampleComponent;

Click a flag icon to toggle it. Each click updates both the underlying cell value (through setDataAtCell()) and the button’s aria-label, so the accessible name always matches what the icon shows.

Use a third-party icon set

An icon library reaches the cell in one of two ways, and which one you get depends on the framework:

A DOM scan. You write a placeholder element, and the library replaces it with an <svg>. Lucide’s vanilla package uses <i data-lucide="flag"></i> plus a createIcons() call.
A component. The icon is a component you render directly, such as <Flag />. This needs a renderer that returns framework markup rather than DOM nodes.

Install the React package, then pass a renderer component to the column:

1
npm install lucide-react

The component receives the cell’s value and coordinates, so the icon goes in as JSX and no createIcons() scan runs at all.

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Flag, FlagOff } from 'lucide-react';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const data = [
9
  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },
10
  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },
11
  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },
12
  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },
13
  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },
14
];
15

16
// A renderer component receives the cell's value and coordinates, so the
17
// Lucide icon goes in as JSX. No `data-lucide` placeholder and no
18
// `createIcons()` scan - React renders the `<svg>` itself.
19
//
20
// Pass a renderer component through `<HotColumn renderer={...}>`, not through
21
// a `renderer` key in the `columns` array. Only the prop is wrapped for React;
22
// a component in `columns` reaches the grid as a plain renderer function and
23
// is called with `(instance, TD, row, ...)` instead of a props object.
24
const FlagCell = ({ instance, row, value }) => {
25
  const taskName = String(instance.getDataAtCell(row, 0));
26
  const flagged = Boolean(value);
27
  // The icon has no accessible name, so the button carries an `aria-label`
28
  // that describes what clicking it does.
29
  const label = flagged ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`;
30

31
  return (
32
    <button
33
      type="button"
34
      aria-label={label}
35
      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}
36
      onClick={() => instance.setDataAtCell(row, 3, !flagged)}
37
    >
38
      {/* `currentColor` is Lucide's default stroke, so the icon stays visible
39
            in both light and dark themes. */}
40
      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}
41
    </button>
42
  );
43
};
44

45
const ExampleComponent = () => {
46
  return (
47
    <HotTable
48
      data={data}
49
      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}
50
      height="auto"
51
      autoWrapRow={true}
52
      autoWrapCol={true}
53
      licenseKey="non-commercial-and-evaluation"
54
    >
55
      <HotColumn data="task" />
56
      <HotColumn data="assignee" />
57
      <HotColumn data="dueDate" type="date" dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }} />
58
      <HotColumn data="flagged" className="htCenter" renderer={FlagCell} />
59
    </HotTable>
60
  );
61
};
62

63
export default ExampleComponent;

1
import { HotTable, HotColumn, HotRendererProps } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Flag, FlagOff } from 'lucide-react';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
interface Task {
9
  task: string;
10
  assignee: string;
11
  dueDate: string;
12
  flagged: boolean;
13
}
14

15
const data: Task[] = [
16
  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },
17
  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },
18
  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },
19
  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },
20
  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },
21
];
22

23
// A renderer component receives the cell's value and coordinates, so the
24
// Lucide icon goes in as JSX. No `data-lucide` placeholder and no
25
// `createIcons()` scan - React renders the `<svg>` itself.
26
//
27
// Pass a renderer component through `<HotColumn renderer={...}>`, not through
28
// a `renderer` key in the `columns` array. Only the prop is wrapped for React;
29
// a component in `columns` reaches the grid as a plain renderer function and
30
// is called with `(instance, TD, row, ...)` instead of a props object.
31
const FlagCell = ({ instance, row, value }: HotRendererProps) => {
32
  const taskName = String(instance.getDataAtCell(row, 0));
33
  const flagged = Boolean(value);
34
  // The icon has no accessible name, so the button carries an `aria-label`
35
  // that describes what clicking it does.
36
  const label = flagged
37
    ? `Remove the follow-up flag from ${taskName}`
38
    : `Flag ${taskName} for follow-up`;
39

40
  return (
41
    <button
42
      type="button"
43
      aria-label={label}
44
      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}
45
      onClick={() => instance.setDataAtCell(row, 3, !flagged)}
46
    >
47
      {/* `currentColor` is Lucide's default stroke, so the icon stays visible
48
          in both light and dark themes. */}
49
      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}
50
    </button>
51
  );
52
};
53

54
const ExampleComponent = () => {
55
  return (
56
    <HotTable
57
      data={data}
58
      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}
59
      height="auto"
60
      autoWrapRow={true}
61
      autoWrapCol={true}
62
      licenseKey="non-commercial-and-evaluation"
63
    >
64
      <HotColumn data="task" />
65
      <HotColumn data="assignee" />
66
      <HotColumn
67
        data="dueDate"
68
        type="date"
69
        dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }}
70
      />
71
      <HotColumn data="flagged" className="htCenter" renderer={FlagCell} />
72
    </HotTable>
73
  );
74
};
75

76
export default ExampleComponent;

The accessibility rule does not change with the icon source: the aria-label stays on the button, never on the icon.

Result

You have a cell that renders an icon based on its data, with a click handler that updates the grid, and an accessible name that a screen reader announces correctly in both icon states.

Icon pack

Cell renderer

Themes