Awesome
<img src="https://github.com/phosphor-icons/phosphor-elm/blob/master/meta/phosphor-mark-tight-black.png?raw=true" width="128" align="right" />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 Related Projects
- @phosphor-icons/homepage ▲ Phosphor homepage and general info
- @phosphor-icons/core ▲ Phosphor icon assets and catalog
- @phosphor-icons/react ▲ Phosphor icon component library for React
- @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
- @phosphor-icons/vue ▲ Phosphor icon component library for Vue
- @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
- @phosphor-icons/elm ▲ Phosphor icons for Elm
- @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
- @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
- @phosphor-icons/figma ▲ Phosphor icons Figma plugin
- @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
- @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
- @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
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
- wireui/phosphoricons ▲ Phosphor icons for Laravel
- phosphor-css ▲ CSS wrapper for Phosphor SVG icons
- ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
- eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
- phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
- wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
- ember-phosphor-icons ▲ Phosphor icons for Ember apps
If you've made a port of Phosphor and you want to see it here, just open a PR here!
License
MIT © Phosphor Icons