Skip to content
Icon Pantry

Free icons for websites

The icons every site needs: navigation, search, account, cart, contact and status. SVG with currentColor, so they follow your text color and dark mode.

Best format
Inline SVG or React component
Size
20 to 24px in the UI, keep the 24px viewBox
36 icons

How to use icons in websites

  1. 1

    Copy the SVG

    Open an icon and copy the SVG (or the React component). The default uses currentColor, so it takes the text color of its parent.

  2. 2

    Paste it inline

    Paste the SVG into your HTML or component. Inline SVG avoids an extra request per icon and can be styled with CSS.

  3. 3

    Size and color with CSS

    Set width and height (20px or 24px for most UI) and color on the parent. Hover and dark mode then need one line of CSS each.

  4. 4

    Label it

    Decorative icons next to text get aria-hidden="true". Icon-only buttons need an aria-label, such as "Search" or "Open menu".

Tips

  • Stick to one stroke width across the site. 2px at 24px reads well; 1.5px suits larger, lighter layouts.
  • Give icon buttons a 44px tap target even when the icon itself is 24px.
  • Prefer inline SVG or components over icon fonts: they are sharper, more accessible and do not flash on load.

Questions

Should I use SVG or PNG icons on a website?

SVG. It stays sharp on every screen, is usually under 1 KB per icon, and can be recolored with CSS. See our SVG vs PNG guide for details.

How do I change the icon color with CSS?

The icons use currentColor, so set the color property on the icon or its parent, for example .button { color: #3047ff }.

Can I use these icons on a commercial website?

Yes, including client sites and online stores, with no attribution required.