Bring life & personality to your projects with Popicons.

Visit website →

Designed by filip, Popicons offers line, solid, and duotone icon variants on a 20px grid with a 1.5px stroke.

Table of contents

• Usage
  • SVG
  • React
  • React Native
• Figma plugin
• Support

Usage

SVG

Easiest way to use Popicons. Simply head over here, and copy icons directly as SVG code (support for JSX included).

React

Install

npm i @popicons/react

Import

import { PopiconsHomeLine, PopiconsHomeSolid, PopiconsHomeDuotone } from "@popicons/react";

function ReactApp() {
  return (
    <>
      <PopiconsHomeLine className="icon" />
      <PopiconsHomeSolid style={{ width: 32, height: 32 }} />
      <PopiconsHomeDuotone className="icon" style={{ width: 32, height: 32 }} />
    </>
  )
}

Upgrade

npm i @popicons/react@latest

React Native

Install

npm i @popicons/react-native

Import

import { PopiconsHomeLine, PopiconsHomeSolid, PopiconsHomeDuotone } from "@popicons/react-native";

function ReactNativeApp() {
  return (
    <>
      <PopiconsHomeLine />
      <PopiconsHomeSolid width={32} height={32} />
    </>
  )
}

Upgrade

npm i @popicons/react-native@latest

Popicons follow the naming convention: Popicons{IconName}{Variant}. Use your IDE's auto-complete for a list of available icons, or simply use website search.

Popicons support tree shaking, ensuring only used icons are bundled.

Figma plugin

Popicons are available as a Figma plugin as well.

License

Popicons are licensed as MIT open source.

Support

If you have any problems, create an issue here.

To buy an add-on to request missing icons, follow this link.

Need a custom icon set? follow this link.

Email: filip@uxthings.com Visit the website: https://popicons.cc