Home

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.

GitHub stars GitHub forks GitHub watchers Follow on GitHub

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

Community Projects

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

License

MIT © Phosphor Icons