Premium icons,tuned to your brand.
Drawn on a 24px grid in six styles. Download the full set, or copy any single icon.
What's new.
New icons and features in each release. Icons added in the latest version are marked New.
Use the icons in your project.
Pick a style on the Icons page before you download. SwiftUI assets and the CSS file keep the style you choose.
React
Each icon is its own component, so your bundle only includes the ones you import.
Install
npm install @flint/react
Use
Icons use currentColor by default, so they match the text around them.
Props
| Prop | Default | What it does |
|---|---|---|
size | 24 | Width and height in pixels. |
weight | "regular" | Style: thin, light, regular, bold, fill or duotone. |
color | currentColor | Stroke colour. Any CSS colour value. |
...props | Passed to the SVG, so className and aria-label work. |
Accessibility
Icons are hidden from screen readers by default. Add an aria-label when an icon is used on its own, like an icon-only button.
SwiftUI
Download SwiftUI assets from the Icons page. Unzip it and drag Flint.xcassets into your Xcode project. Icons are template images, so they take the colour you set.
Works on iOS 13 and later. Every icon has an flint- prefix, like flint-home, so names won't clash with your own assets.
CSS
Download the CSS file from the Icons page and link it in your page head. No JavaScript needed.
Icons size with font-size and use the text colour, so they match the text around them. Add aria-hidden="true", or an aria-label when the icon stands alone.
Figma
The Flint plugin puts the whole set inside Figma. It's free, and new icons appear as soon as each drop goes live.
Insert icons
Open the plugin from Resources (Shift I) or the Actions menu. Search, choose a style, size and colour, then click an icon to place it, or drag it onto the canvas. To replace an icon, select it on the canvas and click a new one. It keeps the size, colour and position.
Stroke or path
Stroke inserts live lines, so you can still change the weight and caps. Use it in working files. Path converts the lines to one outlined vector that scales evenly. Use it for final artwork and hand-off. Fill and Duotone use real boolean cut-outs in both modes.