Struct Icons

Struct Icons is a set of 214 icons I designed on a 16x16 grid. They're free to use. You can grab the Figma file, install them from npm as React components, or just browse them at icons.gaganbiswas.com and click one to copy its SVG.

Why 16x16

Most icon sets are drawn at 24px and scaled down when you need them small. At 16px that means strokes land on half pixels and come out blurry, which is exactly the size I kept needing for buttons, menus and table rows. So I drew these at 16 from the start, with a 2px stroke, and lined everything up to whole pixels so they stay sharp at their actual size.

What's in it

Mostly the everyday interface stuff: files, folders, users, settings, search, locks, phones, timers. There's also a full set of arrows and chevrons, media controls for play, pause, skip and volume, and a few brand logos like GitHub, Figma, Slack and X. Where it made sense I added a filled version too, so things like bookmark, heart and star have an on and off state.

Using them in React

npm install @struct-ui/icons

import { ArrowRight, Sun } from "@struct-ui/icons";

function MyComponent() {
  return (
    <div>
      <ArrowRight />
      <Sun />
    </div>
  );
}

The icons use currentColor, so they pick up whatever text color they're sitting in and there's nothing extra to theme. Each one also takes a title prop for screen readers.

The React side is mostly automated. I export the SVGs from Figma, SVGR turns each one into a typed component, and Rollup bundles them into one package. Adding a new icon is basically drawing it, exporting it and publishing.

License

The npm package is MIT and the Figma file is CC BY 4.0, so you're free to use them in personal or commercial work. The Figma license just asks for a credit. The source is on GitHub. If there's an icon you need that isn't in the set, let me know.