--- title: "Small Icons - Built on a 10px and 14px Grid" product: "Streamline Icons, Illustrations and Elements" url: /small-icons canonical_url: "https://design.streamlinehq.com/small-icons" summary: "Download small icons that stay legible. Micro sits on a 10px grid, Core and Flex on 14px, drawn so detail does not close up at small sizes." --- # Icon sets built to stay legible when they are small > Download small icons that stay legible. Micro sits on a 10px grid, Core and Flex on 14px, drawn so detail does not close up at small sizes. - **URL**: https://design.streamlinehq.com/small-icons --- * Micro sits on a 10px grid, the smallest in the library * Drawn in-house by one team of 8 veteran designers * Recolor to your brand in one click with SVG [Browse Micro Icon Sets](https://www.streamlinehq.com/icons/micro-line-free) ## Pick a small icon set in three easy steps ### Match the Grid to the Size An icon drawn on a 10px grid holds up at 10px. One drawn on a 24px grid does not, however far you scale it down. ### Keep One Set Across the Interface Mixing grid sizes in the same toolbar is what makes a row of small icons look uneven. ### Export as SVG SVG stays crisp at any size and can be recolored in CSS, which matters more at small sizes than large ones. ## Which grid do you need? The grid an icon is drawn on decides the size it holds up at. | | Micro | Core | Flex | | --------------- | ------------------------------ | ----------------- | ---------------- | | Grid | 10px | 14px | 14px | | Detail per icon | Minimal | Essential form | Flowing curves | | Best at | 10 to 14px | 14 to 24px | 14 to 24px | | Typical use | Inline with text, dense tables | General interface | Softer interface | | Free icons | 200 per style | 998 per style | 499 per style | ## Micro: the 10px grid Micro is built on a tiny 10px grid, with no room for unnecessary detail. Every stroke serves legibility. 200 free icons across 2 styles. * **Micro Line**: [200 free icons](https://www.streamlinehq.com/icons/micro-line-free), [2,035 pro icons](https://www.streamlinehq.com/icons/micro-line) * **Micro Solid**: [200 free icons](https://www.streamlinehq.com/icons/micro-solid-free), [2,035 pro icons](https://www.streamlinehq.com/icons/micro-solid) ## Core: a 14px grid with generous spacing Core is the Helvetica of icons, stripped to its essential form with generous spacing. 998 free icons across 8 styles. * **Core Line**: [998 free icons](https://www.streamlinehq.com/icons/core-line-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-line) * **Core Solid**: [998 free icons](https://www.streamlinehq.com/icons/core-solid-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-solid) * **Core Flat**: [998 free icons](https://www.streamlinehq.com/icons/core-flat-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-flat) * **Core Gradient**: [998 free icons](https://www.streamlinehq.com/icons/core-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-gradient) * **Core Duo**: [998 free icons](https://www.streamlinehq.com/icons/core-duo-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-duo-color) * **Core Neon**: [998 free icons](https://www.streamlinehq.com/icons/core-neon-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-neon) * **Core Pop**: [998 free icons](https://www.streamlinehq.com/icons/core-pop-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-pop-style) * **Core Remix**: [998 free icons](https://www.streamlinehq.com/icons/core-remix-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-remix) ## Flex: a 14px grid with softer curves Flex is a fluid icon family inspired by nature's curves, more organic than Core but subtler than Plump. 499 free icons across 8 styles. * **Flex Line**: [499 free icons](https://www.streamlinehq.com/icons/flex-line-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-line) * **Flex Solid**: [499 free icons](https://www.streamlinehq.com/icons/flex-solid-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-solid-style) * **Flex Flat**: [499 free icons](https://www.streamlinehq.com/icons/flex-flat-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-flat-style) * **Flex Gradient**: [499 free icons](https://www.streamlinehq.com/icons/flex-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-gradient) * **Flex Duo**: [499 free icons](https://www.streamlinehq.com/icons/flex-duo-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-duo) * **Flex Neon**: [499 free icons](https://www.streamlinehq.com/icons/flex-neon-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-neon) * **Flex Pop**: [499 free icons](https://www.streamlinehq.com/icons/flex-pop-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-pop) * **Flex Remix**: [499 free icons](https://www.streamlinehq.com/icons/flex-remix-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-remix) ## Where small icons get used ### Legibility Is the Whole Job At 12px there is no room for a shape that almost reads. Micro drops every stroke that is not carrying meaning, which is why it survives where a detailed icon turns to mush. ### Dense Interfaces and Data Tables Tables, breadcrumbs, tag chips, and overflow menus all need an icon that is present without demanding attention. ## Works in your tools * [Mac App](https://home.streamlinehq.com/plugins/download): Drag and drop icons directly into any app * [Figma](https://www.figma.com/community/plugin/852192486284901337): Browse and insert icons without leaving Figma * [Framer](https://www.framer.com/marketplace/plugins/core-icons-by-streamline/): Use icons natively in Framer projects * [Webflow](https://webflow.com/apps/detail/streamline-icons): Add icons directly to Webflow sites * [VS Code](https://marketplace.visualstudio.com/items?itemName=streamline.streamline-icons): Insert icons as SVG or JSX in editors * [Lucid](https://lucid.co/marketplace/01f05f6d/streamline-icons-illustrations-emojis-and-elements): Add icons to your Lucidchart diagrams * [Miro](https://miro.com/marketplace/streamline/): Drop icons into your Miro boards * [Adobe Express](https://adobesparkpost.app.link/TR9Mb7TXFLb?addOnId=w165n33k3): Use icons in Adobe Express projects ## Get more small icons with Pro Free sets cover thousands of icons. Pro unlocks the full library across every family. ### Free: $0 * 109,582 icons * Mandatory attribution * All plugins, web app, MCP and API (limited) * Adjust size, color and format [Get started](https://www.streamlinehq.com/free) ### Pro subscription: $19 per month * 333,032 pro icons on top * No attribution required * 58 pro sets in 11 families * All plugins, web app, MCP and API * Pay monthly or yearly [Get Pro](https://www.streamlinehq.com/pricing) ### One-time purchase: Lifetime * Buy once, own forever * Future assets included * All source files as a ZIP * All plugins, web app, MCP and API * No renewal fees [Get Lifetime](https://www.streamlinehq.com/lifetime) ## A Small Icon Is Drawn Small Shrinking a large icon does not make it a small icon. Detail that reads fine at 48px closes up at 12px, and strokes that looked balanced start to merge into each other. An icon built for small sizes is drawn on a smaller grid from the start, with fewer strokes and more space between them. ## Which Grid to Pick Micro sits on a 10px grid, the smallest in the library. There is no room for unnecessary detail, so every stroke has to serve legibility. Core and Flex sit on a 14px grid, which suits a general interface at 14 to 24px. Both keep generous inner spacing, which is what stops shapes closing up. ## Where Small Icons Earn Their Place Inline with body text, in a dense data table, in breadcrumbs and tag chips, or in an overflow menu. Anywhere the icon has to be present without taking over the row. The test is simple. If you cannot tell what it is at the size it actually ships at, the icon has failed, however good it looks in the design file. ## Frequently asked questions Quick answers about icons at small sizes. ### What are small icons? Icons drawn on a small grid so they stay readable at small display sizes. Micro sits on a 10px grid, Core and Flex on 14px. ### Where can I download small icons? Visit [streamlinehq.com/icons/micro-line-free](https://www.streamlinehq.com/icons/micro-line-free) for the smallest grid, or browse Core and Flex for a 14px grid. ### Can I just shrink a normal icon? Usually not well. Detail that works at 48px closes up at 12px, and strokes merge. An icon drawn on a smaller grid has fewer strokes and more space between them from the start. ### What size should interface icons be? Around 12 to 16px next to body text, and 20 to 24px for standalone controls. Match the grid to that: Micro at the small end, Core or Flex above it. ### Are small icons free? Yes, if you pick a free-tier set. Micro has 200 free icons per style, and Streamline's free library is 109,582 icons across 34 families. ### What about 16x16 specifically? See [16x16 icon sets](/16x16-icons.md), which covers the four families that hold up at that exact size.