Installation

React

npm install pulsoicon-react

import { Bell } from "pulsoicon-react";

export function Notifications() {
  return (
    <button>
      <Bell size={20} /> Notifications
    </button>
  );
}

React 18 or newer. Motion 12 or newer plays the icons; it is installed with the package, and an app that already uses Motion shares its copy.

Vue

npm install pulsoicon-vue

<script setup lang="ts">
import { Bell } from "pulsoicon-vue";
</script>

<template>
  <button><Bell :size="20" /> Notifications</button>
</template>

Svelte

npm install pulsoicon-svelte

<script lang="ts">
  import { Bell } from "pulsoicon-svelte";
</script>

<button><Bell size={20} /> Notifications</button>

Jetpack Compose

// build.gradle.kts of your app module
dependencies {
    implementation("com.citypulso:pulsoicon-compose:<version>")
}

Replace <version> with the version shown at the top of the Compose guide. Android 8.0 (API 26) or newer.

SwiftUI

In Xcode: File → Add Package Dependencies → https://github.com/CityPulso/PulsoIcon.git. Or in Package.swift:

.package(url: "https://github.com/CityPulso/PulsoIcon.git", from: "<version>"),
// and in your target:
.product(name: "PulsoIcon", package: "PulsoIcon"),

iOS 17, macOS 14, tvOS 17, watchOS 10 or visionOS 1.

Other frameworks

pulsoicon-core holds the icon data, the motion recipes and a framework-free player. The Vue and Svelte packages are each a thin component around it; see its README to wrap another framework.