phosphor-elm

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

This implementation is inspired by elm-feather.

Installation

elm install phosphor-icons/phosphor-elm

Usage

All icons have six weights; Regular, Thin, Light, Bold, Fill, and Duotone. Rendering an icon requires just a template and a weight:

import Phosphor exposing (IconWeight(..))

-- Within your view:
Phosphor.checks Bold
    |> Phosphor.toHtml []

Styling

Icons behave as text, inheriting the color and font-size from their parent. Further styling can be applied with the helpers withSize, withSizeUnit, and withClass.

Phosphor.cloud Duotone
    |> withSize 24
    |> withSizeUnit "px"
    |> withClass "custom-icon"
    |> toHtml []

By default all icons render at 1em with the class ph-icon.

Our Projects

• @phosphor-icons/homepage ▲ Phosphor homepage and general info
• @phosphor-icons/core ▲ Phosphor icon assets and catalog
• @phosphor-icons/elm ▲ Phosphor icons for Elm
• @phosphor-icons/figma ▲ Phosphor icons Figma plugin
• @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
• @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
• @phosphor-icons/penpot ▲ Phosphor icons Penpot plugin
• @phosphor-icons/react ▲ Phosphor icon component library for React
• @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
• @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
• @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
• @phosphor-icons/unplugin ▲ A multi-framework bundler plugin for generating Phosphor sprite sheets
• @phosphor-icons/vue ▲ Phosphor icon component library for Vue
• @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
• @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components

Community Projects

• adamglin0/compose-phosphor-icons ▲ Phosphor icons for Compose Multiplatform
• brettkolodny/phosphor-lustre ▲ Phosphor icons for Lustre
• cjohansen/phosphor-clj ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
• codeat3/blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
• dreamRs/phosphor-r ▲ Phosphor icon wrapper for R documents and applications
• duongdev/phosphor-react-native ▲ Phosphor icon component library for React Native
• haruaki07/phosphor-svelte ▲ Phosphor icons for Svelte apps
• IgnaceMaes/ember-phosphor-icons ▲ Phosphor icons for Ember apps
• lucagoslar/phosphor-css ▲ CSS wrapper for Phosphor SVG icons
• maful/ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
• meadowsys/phosphor-svgs ▲ Phosphor icons as Rust string constants
• mwood/tamagui-phosphor-icons ▲ Phosphor icons for Tamagui
• oyedejioyewole/nuxt-phosphor-icons ▲ Phosphor icons integration for Nuxt
• pepaslabs/phosphor-uikit ▲ Xcode asset catalog generator for Swift/UIKit
• raycast/phosphor-icons ▲ Phosphor icons Raycast extension
• reatlat/eleventy-plugin-phosphoricons ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
• robruiz/wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
• sachaw/solid-phosphor ▲ Phosphor icons for SolidJS
• SeanMcP/phosphor-astro ▲ Phosphor icons as Astro components
• SorenHolstHansen/phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
• vnphanquang/phosphor-icons-tailwindcss ▲ TailwindCSS plugin for Phosphor icons
• wireui/phosphoricons ▲ Phosphor icons for Laravel

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

License

MIT © Phosphor Icons