The icon library

The Studio's icon library puts 34,766 icons from eight open-source icon packs a click away, and they work offline. A second tier searches the much larger public Iconify catalogue when you are online. You can browse the icons by research topic or by category, search across every pack at once, preview any icon at full size, copy it as clean SVG markup, or drop it straight into a figure that uses the Raw SVG engine. This page covers every control in the library, how its search works, what the copied and inserted markup contains, the licences that come with the icons and what to do when something goes wrong.

At a glance

Opening and closing the library

You can open the icon library in four ways:

1. Click Icon library on the tool rail on the left of the Studio. If your window is short, the rail folds its last tools into More tools. Look for Icon library there.
2. Press ⌘I on a Mac or Ctrl+I on Windows and Linux. The same keys close it again.
3. Open the command palette with ⌘K and run Open Icon library.
4. In the command palette's Go to section, choose Icon library. Its description there is "Search and drop icons into the diagram source".

The library opens as a dialog over the canvas. Its title bar reads Icon library, followed by a summary: the number of bundled icons, "offline (8 icon packs)", "browse by category" and "200k+ more online".

To close it, click the × in the top-right corner (its accessible name is "Close icon library"), press Escape, or click the dimmed area outside the dialog. Escape works even while your cursor is in the search box. ⌘I toggles the library too, but only while focus is not in a text field. When the library closes, focus returns to whatever you used to open it.

The search box has focus as soon as the library opens, so you can start typing straight away.

The first time you open the library in a session, the bundled packs load. You will see Loading icon set… for a moment. They are a large download, so this can take a few seconds on a slow connection. After that the packs stay loaded for the rest of the session, and opening the library again is instant.

How the library is laid out

The dialog has three columns and a message bar.

Until you pick an icon, the preview column reads "Click an icon to preview, copy SVG, or insert into the editor."

The two tiers: Built-in and Online

Two buttons above the search box switch between the two tiers.

Until the bundled packs have finished loading, the Built-in button shows an estimate followed by a plus sign. Once they are loaded, it shows the real count.

The bundled packs

All eight packs ship with flowss, so they never depend on a network connection or on a third-party server.

Every icon has a full name made of its pack prefix and its own name, for example mdi:home, tabler:microscope or healthicons:blood-bag. The preview shows this full name, and hovering over a tile shows the icon's own name. Some packs also give an icon one or more alternative names. These are searchable too, so the same artwork can appear twice in a grid under different names.

Browsing

Research quick picks

The Research list is a set of starting points chosen for scientific and technical figures. Each one fills the search box with a single keyword, and the highlighted pick shows which one is active.

A quick pick works in whichever tier is active. On Built-in it searches the bundled packs. On Online it sends the keyword to the online catalogue.

Categories

Browse by category groups 22,922 of the bundled icons into 31 categories. The number beside each name is how many icons that category holds. An icon can sit in more than one category, so the counts add up to more than the number of distinct icons. Icons that fit no category are still reachable through search or through All icons.

Clicking a category does three things. It clears the search box, it switches you to the Built-in tier and it lists that category's icons in catalogue order. The count line then reads, for example, "227 in Chemistry & lab · instant, offline". Click All icons to go back to the whole collection.

The category list loads separately from the packs. If it is still on its way, the left column shows Loading… under the heading.

Searching

Searching the bundled packs

Type in the search box. The placeholder reads "Search 34,766 built-in icons — empty query browses all…". The grid updates on every keystroke, with no network round trip.

The search follows these rules:

• Every word must match. Your text is split on spaces, and an icon matches only if every word appears somewhere in its name or its full name. For example, arrow left finds arrow-left, arrow-left-bold and arrow-bottom-left.
• Pack prefixes filter. The full name includes the pack prefix, so adding a prefix narrows the search to one pack. mdi heart returns Material Design hearts only, and fa6 star returns Font Awesome stars only.
• Matching is case-insensitive. It also matches inside words, so scope finds microscope, stethoscope and telescope.
• Best matches come first. An exact name match ranks first, then names that start with your first word, then any other match. Within each group, shorter names come before longer ones, and ties are broken alphabetically.
• An empty box browses everything. The whole collection is listed alphabetically by icon name. In this view the count includes the alternative names as well, so it is higher than the number of distinct icons.

The count line under the search box tells you how many results there are, for example "312 matches · instant, offline". The grid shows 120 icons at a time. When there are more, a Show 120 more button appears at the bottom of the grid; near the end it shows the exact number left. Changing the search, picking a quick pick or choosing a category starts again from the first 120.

When typing into the search box, the active category or quick pick is cleared, so your search always spans every bundled pack.

Searching the online catalogue

1. Click Online · 200k+ (Iconify). Its tooltip reads "Searches the 200k+ open-source Iconify catalogue — needs an internet connection". If the search box already holds text, the search runs immediately.
2. Type a keyword. The placeholder reads "Search the 200k+ Iconify catalog (online)…".
3. The search runs 350 milliseconds after you pause typing, once you have typed at least two letters. A single typed letter is not searched on its own: the grid says "Keep typing — or press Enter to search for “…”." Press Enter at any time to search straight away, whatever the length.
4. While the first page loads, the grid shows placeholder tiles and Searching the online catalogue…. When you change the words while results are on screen, the old results fade and Searching… appears beside the count until the new ones arrive.
5. Results arrive 64 at a time. The count line reads, for example, "320+ icons for “flask” · showing 64". A plus sign means the catalogue has more matches than it has counted so far.
6. Click Load more icons under the grid to fetch the next 64. It reads Loading more… while it works. Paging stops at 999 results for one search, which is the most the catalogue answers for a single query; past that, use more specific words.

With an empty search box the grid shows a short introduction, "Search 200,000+ open-source icons from the Iconify catalogue. Results appear as you type.", and four suggestion chips: microscope, dna, server and arrow. Clicking a chip searches for it at once.

When a search returns nothing, the grid reads "No icons match “…”." with the hint "Try a broader or simpler word — “heart” rather than “cardiac muscle”."

The online tiles behave a little differently from the bundled ones:

Previewing an icon

Click any tile. The tile is outlined, and the preview column shows the icon at 128 pixels on a white card, with its full name underneath, for example ph:flask. Bundled icons appear immediately. An online icon appears immediately when its drawing came with the search results; otherwise a spinner shows while it is fetched, for up to ten seconds.

The preview card is always white, whatever your theme, so you see the icon as it will look on a light page.

Once an icon is selected, two buttons appear under the preview: Copy SVG and Insert into editor.

Copying an icon as SVG

Click Copy SVG. The button briefly changes to Copied, and the icon's markup is on your clipboard, ready to paste into any SVG editor, document or slide tool that accepts SVG markup, or into another engine's source if that engine accepts embedded SVG.

What the copied markup contains:

If the icon is from a Font Awesome set, or from an online set under a Creative Commons Attribution licence, the markup also carries a credit (see below).

Copying needs a secure page and clipboard permission. If either is missing, the message bar tells you why and nothing is copied (see Troubleshooting).

Inserting an icon into a figure

Insert into editor adds the selected icon's markup to the end of your figure's source, on a new line, and closes the library. The markup is the same as Copy SVG would give you.

Insert works only when the active figure uses the Raw SVG engine, because the icon is SVG markup and only that engine's source is SVG. For any other engine, Insert does not change your source. Instead, the message bar explains, for example: "Icons insert into the SVG engine — this figure uses Mermaid. Switch the figure to the SVG engine, or use Copy SVG instead." The message names your figure's engine.

To use an icon in a Raw SVG figure:

1. Start a new figure with New figure (⌥⌘N or Ctrl+Alt+N), then pick Raw SVG from Engines & templates on the rail. Raw SVG is in the More group of the engine list. Picking an engine for an existing figure replaces its source with that engine's starter, which you can undo with ⌘Z.
2. Open the icon library, select an icon and click Insert into editor.
3. Open the code sheet (⌘\) and find the new <svg …>…</svg> block at the end of the source.
4. For precise placement, cut that block and paste it inside your figure's outer <svg> element. Then give it x, y, width and height attributes. A nested <svg> is valid SVG and is positioned like any other element.
5. To change the colour, edit the fill or stroke values in the inserted markup. Bundled icons use #0f172a.

Note: The Raw SVG engine expects a single <svg>…</svg> document. If you delete the outer element's opening or closing tag while you move things around, the canvas shows the render error Input must be a single <svg>…</svg> document. Put the tag back and the figure renders again.

Licences and attribution

Each pack keeps its own licence. Seven of the eight bundled packs are MIT, Apache-2.0 or ISC. Under those licences you can use the icons in your figures, including commercial work, and flowss already carries their notices.

Font Awesome is the exception. Font Awesome 6 Solid (fa6-solid) is licensed under CC BY 4.0, and that licence asks for attribution wherever its icons are used, including in the figures you publish. To make that easy, any Font Awesome icon you copy or insert carries its credit inside the markup, as an SVG <desc> element directly after the opening tag:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="…"><desc>Icons: Font Awesome Free by Fonticons, Inc. (https://fontawesome.com), licensed CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/).</desc>…</svg>

The same credit is added to icons from any other Font Awesome set you find through the online tier, such as fa6-regular or fa6-brands.

Many online sets are under a Creative Commons Attribution licence too, for example Game Icons (CC BY 3.0), Codicons and coolicons (CC BY 4.0), or Arcticons (CC BY-SA 4.0). An icon from such a set carries its own credit in the same <desc> element when you copy or insert it: the set's name, its author when the catalogue names one, the Iconify set it came from, and the licence with a link to its deed, for example Icons: Game Icons by GameIcons (https://github.com/game-icons/icons), from the Iconify catalogue (icon set "game-icons"), licensed CC BY 3.0 (https://creativecommons.org/licenses/by/3.0/). When such an icon is selected, the line under the preview reads "Licensed … — credit required. Copy SVG and Insert write the credit into the SVG’s description."

flowss is a commercial product, so online sets under a NonCommercial licence (CC BY-NC, such as Custom Brand Icons and PrestaShop Icons) are not offered: the relay leaves them out of every results page and refuses their drawings. A set whose licence cannot be established is left out the same way. A ShareAlike (BY-SA) set may also ask you to share adaptations of the icon under the same licence; the credit does not cover that.

Icons from every other pack, including online sets under CC0, MIT, Apache-2.0 or ISC, are passed through unchanged.

Warning: A <desc> element is invisible when the figure is drawn. If you export a figure containing Font Awesome or other CC BY icons as PNG or PDF, or paste it into a slide, the credit does not show on the page. Add a visible credit line, such as a caption or an acknowledgement, wherever you publish the figure.

For the platform's full list of third-party licences, see Copyright, licences and attributions.

The same icons in other studios

The bundled packs are not only for the Studio. Weave and Science use the same packs in their own icon pickers and on their canvases, so an icon name you find here, such as healthicons:virus, refers to the same artwork there. See Weave and Science for how icons are placed in those studios. Each has its own placement tools, so this page does not cover them.

Tips

• Search in the language of the pack. Icon names are short English words joined with hyphens. Try user, not person icon, and chart-bar, not bar graph. If one word finds nothing, try a synonym such as bin and trash, or cog and settings.
• Use a pack prefix for a consistent style. Icons from one pack share a line weight and grid. Searching tabler … or lucide … for every icon in a figure keeps the set visually coherent.
• Health Icons covers clinical figures. Health Icons is a pack drawn for public-health and clinical subjects. Search healthicons with a subject word, such as healthicons blood or healthicons virus.
• Phosphor has the most variety. Phosphor offers several weights of each icon, as separate names ending in -bold, -thin, -light, -fill and -duotone. Use them to emphasise one icon among several.
• Browse first, then refine. Pick a category to see what exists, then type a word. Typing clears the category and searches every pack, so you may find better matches in another category.
• Copy SVG works for any engine. When your figure is in another engine, Copy SVG gives you markup to paste into a separate SVG figure, a slide or a design tool, or into a Raw SVG figure that you later export alongside your diagram.
• Prefer the bundled tier for sensitive work. It never sends your search terms anywhere, and it works on a plane.
• Press Enter in the online tier. It skips the typing pause and searches at once, which is handy for short words such as ox or ai.

Limits and known constraints

• Insert targets one engine. Insert into editor works only for figures using the Raw SVG engine. Other engines' source languages, such as Mermaid, PlantUML and D2, have no slot the library can fill, so use Copy SVG instead.
• Fixed size and colour. Copied and inserted icons are 128 × 128 pixels, and single-colour icons are coloured #0f172a. Neither is adjustable in the library. Edit the width, height, fill or stroke attributes after inserting.
• The online tier is capped and online-only. It pages 64 results at a time up to 999 results per search. It needs an internet connection and depends on the availability of the public Iconify service.
• Online searches have a daily allowance. Searches are counted per network address per day, so people behind a shared office network share one allowance.
• Online search words are capped at 64 characters. A longer entry is not searched.
• Online searches are sent to a third party. Your search terms are passed on to the Iconify service. Bundled searches stay in your browser.
• Online licences come from the catalogue. The library shows an online icon's licence in its tile tooltip when the catalogue reports one, and the credit-owing sets also under the preview and as a BY badge. Check it before publishing.
• The first open is slow. The bundled packs are a large download the first time you open the library in a session.

Troubleshooting

Related pages

• The Studio editor
• Data, timeline, TikZ and the diagram tools
• Styling, themes and layout
• Choosing an engine, including the Raw SVG engine
• Exporting your work
• Copyright, licences and attributions
• Keyboard shortcuts
• Weave and Science, which use the same icon packs