How to Add a System UIcons Icon to Your Project

Updated

System UIcons gives you four ways to get an icon into your project: copy the SVG element, copy a CDN link, download a single SVG file, or download the whole set at once. Pick the copy options for quick, code-level use, and the download options when you need files stored locally. The set is described as free to use without attribution, so no credit line is required in your project.

Option 1: Copy the SVG element

Best when you want to paste the icon straight into HTML, JSX, or a template.

  1. Find the icon you want on systemuicons.com.
  2. Use the Copy SVG Element action on that icon.
  3. Paste it into your markup where the icon should appear.

Expected result: inline <svg> markup in your file. Because it's inline, you can style it with CSS (for example fill or stroke) and it inherits your page's color rules. No extra network request is made.

Watch out for: pasting the same inline SVG many times bloats your markup. If you repeat an icon dozens of times, a sprite or a downloaded file is usually cleaner.

Option 2: Copy the CDN link

Best when you want to reference the icon by URL instead of embedding markup.

  1. Find the icon on systemuicons.com.
  2. Use the Copy CDN Link action.
  3. Use that URL as an <img src="...">, a CSS background-image, or wherever your project accepts an image URL.

Expected result: the icon loads from the CDN at render time. Your markup stays short, and updates to the hosted file are picked up automatically.

Watch out for: a CDN link depends on an external host being reachable. If your project must work offline or you need strict control over assets, download the SVG instead.

Option 3: Download a single SVG icon

Best when you need one icon as a local file.

  1. Find the icon on systemuicons.com.
  2. Use the Download SVG Icon action.
  3. Save the file into your project's assets or icons folder.
  4. Reference it from your code (for example an <img> tag or an import, depending on your build setup).

Expected result: a local .svg file you control. It works offline and version-controls with your project.

Watch out for: you're responsible for keeping it updated if you later want a revised version of the icon.

Option 4: Download all icons at once

Best when you're building a design system or expect to use many icons.

  1. Use the Download All Icons action on the site.
  2. Unpack the archive into a dedicated icons directory.
  3. Reference individual files from your code, or wire them into your build pipeline.

Expected result: the full set available locally, so you can browse and pick icons without returning to the site.

Watch out for: a full set adds many files to your repo. If you only need a handful, downloading them individually keeps your project lean.

Choosing between the four

Method Output Works offline Best for
Copy SVG element Inline <svg> markup Yes One-off icons you want to style with CSS
Copy CDN link External URL No Short markup, hosted assets
Download SVG icon Local .svg file Yes A few icons you want to control
Download all icons Full local set Yes Design systems and icon-heavy projects

Common snags

  • Icon doesn't show up after pasting inline SVG. Check that you copied the full element, including the opening and closing <svg> tags, and that no CSS rule is hiding it.
  • CDN icon looks broken. Confirm the link was copied in full and that your environment allows external requests.
  • Downloaded icon won't render. Make sure the file kept its .svg extension and that your build tool is configured to handle SVG assets.
  • Search returns nothing. The site shows a "No Matches Found" state, so try a shorter or more general term.

Quick answer on credit and cost

The site describes the set as free to use without attribution, so you don't need to add a credit line when you use an icon. If you want to support the project, the page includes a GitHub Sponsor option.