A flexible icon family for Elm
See the code
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.
elm install phosphor-icons/phosphor-elm
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 []
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.
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
153 followers · starred Apr 2023
105 followers · starred Nov 2023
A flexible icon family for Elm
See the code
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.
elm install phosphor-icons/phosphor-elm
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 []
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.
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
153 followers · starred Apr 2023
105 followers · starred Nov 2023