Custom Icons in React Data Grids: Complete Tutorial

You've spent weeks perfecting your app's design system. Every button, input, and dropdown uses icons from your custom set—maybe Font Awesome Pro with your brand colors, or a bespoke SVG collection your designer crafted. Then you add a data grid, and suddenly there are sort arrows and filter icons that look... off. They're generic, they clash with your aesthetic, and they scream "I'm using the default theme."

Custom icons aren't just about vanity. They're about visual consistency, brand identity, and user confidence. When every UI element matches your design language, users trust the interface more. When one component stands out as "different," it erodes that trust.

In this guide, we'll cover how to customize icons in React data grids, which icons to replace, and best practices for icon design. Whether you're using Font Awesome, Material Icons, Lucide, or custom SVGs, you'll learn how to make your tables truly yours.

Why Custom Icons Matter

Brand Consistency

Your brand has a visual language—icon style, stroke weight, corner radius. When table icons match, the entire app feels cohesive and professional.

Better UX

Custom icons can be clearer, more descriptive, or better sized for your context. A well-designed filter icon is instantly recognizable. Combined with custom theming, your table becomes truly yours.

Stand Out

Default icons make your app look generic. Custom icons—especially unique ones—signal attention to detail and quality craftsmanship.

Real-World Examples

SaaS Dashboards: Match table icons to your sidebar navigation icons for visual harmony
Financial Tools: Use distinctive sort icons that match your chart and graph visualizations
E-Commerce Admin: Align table icons with product card icons, button icons, and status badges
Enterprise Apps: Use corporate-approved icon sets that match internal design guidelines

What Icons Can You Customize?

Modern React data grids use icons in several places. Simple Table lets you customize all of them—no locked-in defaults. Here's what you can change:

Sorting Icons

Ascending, descending, and unsorted state indicators in column headers.

Typical props: sortUpIcon, sortDownIcon, sortNeutralIcon

Filter Icons

Button to open filter dropdowns or menus in column headers.

Typical props: filterIcon

Expand/Collapse Icons

For row grouping, hierarchical data, or collapsible column groups.

Typical props: expandIcon, collapseIcon

◄ ►

Pagination Icons

Previous, next, first, and last page navigation buttons in the footer.

Typical props: prevIcon, nextIcon

How to Add Custom Icons in Simple Table

Simple Table makes icon customization straightforward. Pass React components (or JSX) as props, and the table uses them everywhere that icon appears.

Example 1: Font Awesome Icons

React TSX

Copy

1import { SimpleTable } from "simple-table-core";
2import "simple-table-core/styles.css";
3import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4import {
5  faSortUp,
6  faSortDown,
7  faFilter,
8  faChevronRight,
9  faChevronDown,
10  faAngleLeft,
11  faAngleRight,
12} from "@fortawesome/free-solid-svg-icons";
13
14export default function CustomIconTable({ data, headers }) {
15  return (
16    <SimpleTable
17      defaultHeaders={headers}
18      rows={data}
19      rowIdAccessor="id"
20      height="500px"
21      
22      // Sorting icons
23      sortUpIcon={<FontAwesomeIcon icon={faSortUp} className="text-blue-600" />}
24      sortDownIcon={<FontAwesomeIcon icon={faSortDown} className="text-blue-600" />}
25      
26      // Filter icon
27      filterIcon={<FontAwesomeIcon icon={faFilter} className="text-gray-600" />}
28      
29      // Expand/collapse icons (for row grouping)
30      expandIcon={<FontAwesomeIcon icon={faChevronRight} className="text-gray-600" />}
31      collapseIcon={<FontAwesomeIcon icon={faChevronDown} className="text-gray-600" />}
32      
33      // Pagination icons
34      prevIcon={<FontAwesomeIcon icon={faAngleLeft} className="text-blue-600" />}
35      nextIcon={<FontAwesomeIcon icon={faAngleRight} className="text-blue-600" />}
36    />
37  );
38}

Example 2: Custom SVG Icons

If you have custom SVG icons, wrap them in React components and pass them the same way:

React TSX

Copy

1// Custom SVG icon components
2const SortUpIcon = () => (
3  <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
4    <path d="M6 2L11 8H1L6 2Z" />
5  </svg>
6);
7
8const SortDownIcon = () => (
9  <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
10    <path d="M6 10L1 4H11L6 10Z" />
11  </svg>
12);
13
14const FilterIcon = () => (
15  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
16    <path d="M0 2h14v2H0zm2 4h10v2H2zm2 4h6v2H4z" />
17  </svg>
18);
19
20export default function CustomSVGTable({ data, headers }) {
21  return (
22    <SimpleTable
23      defaultHeaders={headers}
24      rows={data}
25      rowIdAccessor="id"
26      sortUpIcon={<SortUpIcon />}
27      sortDownIcon={<SortDownIcon />}
28      filterIcon={<FilterIcon />}
29    />
30  );
31}

Example 3: Lucide Icons (Popular Alternative)

React TSX

Copy

1import { SimpleTable } from "simple-table-core";
2import "simple-table-core/styles.css";
3import {
4  ChevronUp,
5  ChevronDown,
6  Filter,
7  ChevronRight,
8  ChevronLeft,
9} from "lucide-react";
10
11export default function LucideIconTable({ data, headers }) {
12  return (
13    <SimpleTable
14      defaultHeaders={headers}
15      rows={data}
16      rowIdAccessor="id"
17      
18      // Lucide icons with custom size and color
19      sortUpIcon={<ChevronUp size={16} className="text-indigo-600" />}
20      sortDownIcon={<ChevronDown size={16} className="text-indigo-600" />}
21      filterIcon={<Filter size={14} className="text-gray-500" />}
22      prevIcon={<ChevronLeft size={18} className="text-indigo-600" />}
23      nextIcon={<ChevronRight size={18} className="text-indigo-600" />}
24    />
25  );
26}

Pro Tip: Icons are just React components or JSX. You can pass inline SVGs, icon library components, or even custom React components with animations or state.

Custom Icon Best Practices

Design Guidelines

📏 Consistent Size & Weight

All table icons should use the same visual weight (stroke thickness) and roughly the same size. Sort icons at 16px and filter icons at 14px creates visual imbalance.

🎨 Match Your Brand Colors

Don't use default black/gray. If your primary color is blue, make sort and filter icons blue. If you use purple accents, match those.

✨ Keep Icons Simple

Table icons are small (12-16px). Intricate details get lost. Use clear, high-contrast shapes that are recognizable at small sizes.

♿ Ensure Accessibility

Icons must have sufficient color contrast (WCAG AA: 4.5:1). Don't rely on color alone—use shapes that are distinguishable in grayscale.

🧪 Test in Dark Mode

If you support dark mode, ensure icons are visible and meet contrast requirements in both themes. You may need different color classes for light vs dark.

Common Mistakes to Avoid

❌Mixing icon styles: Using Font Awesome for some icons and Material Icons for others—pick one set
❌Over-decorating: Adding gradients, shadows, or animations that distract from data
❌Ignoring hover states: Icons should have visual feedback on hover (color change, slight scale)
❌Using text labels as icons: "Sort ↑" instead of a proper icon—this breaks visual hierarchy

Advanced Icon Patterns

Animated Icons

Add subtle animations to make interactions feel more responsive:

React TSX

Copy

1// Animated sort icon component
2const AnimatedSortIcon = ({ direction }: { direction: 'up' | 'down' }) => (
3  <svg
4    width="12"
5    height="12"
6    viewBox="0 0 12 12"
7    className="transition-transform duration-200 ease-in-out"
8    style={{ transform: direction === 'down' ? 'rotate(180deg)' : 'rotate(0)' }}
9  >
10    <path d="M6 2L11 8H1L6 2Z" fill="currentColor" />
11  </svg>
12);
13
14// Usage
15<SimpleTable
16  sortUpIcon={<AnimatedSortIcon direction="up" />}
17  sortDownIcon={<AnimatedSortIcon direction="down" />}
18  // ... other props
19/>

Dynamic Icon Colors Based on State

React TSX

Copy

1// Icon that changes color when filter is active
2const FilterIconWithState = ({ isActive }: { isActive: boolean }) => (
3  <FontAwesomeIcon
4    icon={faFilter}
5    className={`transition-colors ${
6      isActive ? 'text-blue-600' : 'text-gray-400'
7    }`}
8  />
9);

Icon Sets as a Theme

Create reusable icon sets for different themes or contexts:

React TSX

Copy

1// Icon theme configurations
2const iconThemes = {
3  modern: {
4    sortUpIcon: <ChevronUp size={14} className="text-indigo-500" />,
5    sortDownIcon: <ChevronDown size={14} className="text-indigo-500" />,
6    filterIcon: <Filter size={14} className="text-gray-500" />,
7  },
8  classic: {
9    sortUpIcon: <FontAwesomeIcon icon={faSortUp} className="text-gray-700" />,
10    sortDownIcon: <FontAwesomeIcon icon={faSortDown} className="text-gray-700" />,
11    filterIcon: <FontAwesomeIcon icon={faFilter} className="text-gray-700" />,
12  },
13};
14
15// Usage
16export default function ThemedTable({ theme = "modern", data, headers }) {
17  return (
18    <SimpleTable
19      {...iconThemes[theme]}
20      defaultHeaders={headers}
21      rows={data}
22    />
23  );
24}

Popular Icon Libraries for React

Not sure which icon library to use? Here are the most popular choices:

Library	Icon Count	License	Best For
Font Awesome (Free)	2,000+	Free	General-purpose apps, most popular
Lucide	1,000+	MIT	Modern, clean design; Feather Icons fork
React Icons	10,000+	MIT	Multiple icon sets in one package
Material Icons	2,000+	Apache 2.0	Material Design apps
Heroicons	300+	MIT	Tailwind CSS projects

Make Your Tables Truly Yours

Custom icons are a small detail that makes a big difference. They signal quality, strengthen your brand, and create visual consistency across your entire application. With Simple Table, customization is as simple as passing icon components as props—no wrestling with CSS overrides or complex configuration.

Choose one icon library and use it consistently throughout your app
Match your brand colors and visual style
Keep icons simple and high-contrast for small sizes
Test in both light and dark mode if you support themes
Consider subtle animations for better interaction feedback

Whether you're using Font Awesome, Lucide, Material Icons, or custom SVGs, Simple Table makes it trivial to replace default icons with your own. Pass components as props, and you're done. No complexity, no limitations, just tables that match your vision.

Custom Icons in React Data Grids: Complete Tutorial

Why Custom Icons Matter

Brand Consistency

Better UX

Stand Out

Real-World Examples

What Icons Can You Customize?

Sorting Icons

Filter Icons

Expand/Collapse Icons

Pagination Icons

How to Add Custom Icons in Simple Table

Example 1: Font Awesome Icons

Example 2: Custom SVG Icons

Example 3: Lucide Icons (Popular Alternative)

Custom Icon Best Practices

Design Guidelines

📏 Consistent Size & Weight

🎨 Match Your Brand Colors

✨ Keep Icons Simple

♿ Ensure Accessibility

🧪 Test in Dark Mode

Common Mistakes to Avoid

Advanced Icon Patterns

Animated Icons

Dynamic Icon Colors Based on State

Icon Sets as a Theme

Popular Icon Libraries for React

Make Your Tables Truly Yours

Ready to customize your React table icons?