Icon Audit

Icons pulled in from Figma often land as img instead of inline, locally-bundled svg.

That presents two problems. The icon isn't stored locally within your project and if the source URL of the img moves, times out or the Figma MCP session expires, it breaks and you're left with a missing-image glyph - not good.

Icon Audit is a dev tool that allows you to quick scan and highlight all the icons on a given page. To update a misaligned icon to a svg format, select, pick a replacement and copy the action from the agent prompt window into your coding tool.

Install Icon Audit via npm:

npm install --save-dev icon-audit

Or just tell your agent to set it up:

Install icon-audit as a dev dependency and mount <IconAudit /> in the root layout so it only runs in development. I want the overlay available while designing locally.

If installing manually, add <IconAudit /> to your layout:

import { IconAudit } from "icon-audit/react";

export default function RootLayout({ children }) {
  return (
    <>
      {children}
      <IconAudit />
    </>
  );
}