Custom Icons Guide

Shadcn Table uses Lucide icons by default for all of its internal icons.

If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Lucide icons or icons from a completely different library.

Relevant Table OptionsCopy Anchor Link

Replace with Custom IconsCopy Anchor Link

To replace a default icon, specify the icon in the icons table option. You should get TS hints for the name of the icons you can replace, but you can also consult this source file for a list of all the icons you can replace.

<ShadcnTable
  columns={columns}
  data={data}
  icons={{
    //change sort icon, connect internal props so that it gets styled correctly
    ArrowDownwardIcon: (props) =>  <FontAwesomeIcon icon={faSortDown} {...props} />,
    SearchIcon: () => <FontAwesomeIcon icon={faSearch} />,
    SortIcon: (props) => (<FontAwesomeIcon icon={faArrowDownWideShort} {...props} />), //best practice
  }}

Some icons have style props that get applied to them internally. So, in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in {...props} to your custom icon component as a best practice.

Font Awesome ExampleCopy Anchor Link

Here is an example where we use icons from a completely different library, Font Awesome.