phosphor-flutter

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.

Installation

Add this to your pubspec.yaml

dependencies:
  phosphor_flutter: ^any

Then run the pub get command

flutter pub get

Usage

Normal Icons

Just add a Icon() widget passing any Phosphor Icon value like any Material Icon

// With Material Icons
Icon(
  Icons.edit, // Pencil icon
),

// With Phosphor Icons
Icon(
  PhosphorIcons.pencil, // Pencil Icon
),

You could use any property of the Icon widget to personalize the icon.

// This will show the [Note Pencil] icon in its fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
Icon(
  PhosphorIcons.notePencilFill,
  color: Colors.green,
  size: 30.0,
  semanticLabel: 'New Note',
),

All the icons has their thin, light, regular, bold and fill versions.

[WIP] Duotone Icons

The Duotone icons are still a work in progress

ScreenShots

Example App

You could see all the icons within the example app.

Installing

Download the APK from releases page and install in your device

From source code

Clone the repo
Open directory example cd example
Run flutter flutter run

Our Related Projects

phosphor-home ▲ Phosphor homepage and general info
phosphor-react ▲ Phosphor icon component library for React
phosphor-vue ▲ Phosphor icon component library for Vue
phosphor-icons ▲ Phosphor icons for Vanilla JS
phosphor-webcomponents ▲ Phosphor icons as Web Components
phosphor-figma ▲ Phosphor icons Figma plugin
phosphor-sketch ▲ Phosphor icons Sketch plugin

Community Projects

phosphor-react-native ▲ Phosphor icon component library for React Native
phosphor-svelte ▲ Phosphor icons for Svelte apps
phosphor-r ▲ Phosphor icon wrapper for R documents and applications
blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views

If you've made a port of Phosphor and you want to see it here, just open a PR here!

phosphor-icons/phosphor-flutter