How to use the icons

In HTML

Link to the SVG file, or download it and host it yourself.

<img src="https://iconpantry.com/svg/line/heart.svg" width="24" height="24" alt="Heart" />

To control the color with CSS, paste the inline SVG instead. Open any icon, choose the SVG tab and copy it. The default SVG uses currentColor, so it takes the text color of its parent.

<button style="color: #3047ff">
  <!-- paste inline SVG here -->
  Like
</button>

In React and Next.js

Open an icon, choose the React tab and copy the component into your project.

import { HeartIcon } from "./icons/HeartIcon";

export function LikeButton() {
  return (
    <button className="text-red-500">
      <HeartIcon size={20} aria-hidden="true" /> Like
    </button>
  );
}

Color, size and stroke with CSS

.icon { width: 20px; height: 20px; color: #161a2e; }
.icon:hover { color: #3047ff; }
.icon path, .icon circle, .icon rect { stroke-width: 1.5; }

In Figma, Sketch and Canva

• Figma: open an icon, click Copy SVG, and paste onto the canvas. Strokes stay editable.
• Sketch and Illustrator: download the SVG and drag it in.
• Canva, Google Slides, PowerPoint and Keynote: download a PNG at 512px or 1024px and upload it.

Accessibility

• Decorative icons next to text: add aria-hidden="true".
• Icon-only buttons: give the button an aria-label, such as "Close".
• Keep icons at least 16px and make sure they contrast with the background.

Questions about licensing? See the license and FAQ.