PackagesReroutesAboutlamdera.com

1602/elm-feather/2.1.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

FeatherIcons

Basic Usage

Using a feather icon in your view is as easy as:

featherIcon : Html msg
featherIcon =
    FeatherIcons.feather
        |> FeatherIcons.toHtml []

Change FeatherIcons.feather by the icon you prefer, a list of all icons is visible here: https://1602.github.io/elm-feather-icons/

All icons of this package are provided as the internal type Icon. To turn them into an Html msg, simply use the toHtml function.

type Icon

Opaque type representing icon builder

toHtml : List (Attribute msg) -> Icon -> Html msg

Build icon, ready to use in html. It accepts list of svg attributes, for example in case if you want to add an event handler.

-- default
Icon.download
    |> Icon.toHtml []


-- with some attributes
Icon.download
    |> Icon.withSize 10
    |> Icon.withClass "icon-download"
    |> Icon.toHtml [ onClick Download ]

Customize Icons

Feather icons are 24px size by default, and come with two css classes, feather and feather-"icon-name". For the aperture icon for example, this will be: feather feather-aperture.

To customize it's class and size attributes simply use the withClass and withSize functions before turning them into Html with toHtml.

withClass : String -> Icon -> Icon

Overwrite class attribute of an icon

Icon.download
    |> Icon.withClass "icon-download"
    |> Icon.toHtml []
withSize : Float -> Icon -> Icon

Set size attribute of an icon

Icon.download
    |> Icon.withSize 10
    |> Icon.toHtml []
withSizeUnit : String -> Icon -> Icon

Set unit of size attribute of an icon, one of: "em", "ex", "px", "in", "cm", "mm", "pt", "pc", "%"

Icon.download
    |> Icon.withSize 50
    |> Icon.withSizeUnit "%"
    |> Icon.toHtml []
withStrokeWidth : Float -> Icon -> Icon

Set thickness of icon lines, useful when inlining icons with bold / normal text.

Icon.playCircle
    |> Icon.withStrokeWidth 1
    |> Icon.toHtml []

New Custom Icons

If you'd like to use same API while creating personally designed icons, you can use the customIcon function. You have to provide it with a List (Svg Never) that will be embedded into the icon.

customIcon : List (Svg Never) -> Icon

Build custom svg icon

[ Svg.line [ x1 "21", y1 "10", x2 "3", y2 "10" ] []
, Svg.line [ x1 "21", y1 "6", x2 "3", y2 "6" ] []
, Svg.line [ x1 "21", y1 "14", x2 "3", y2 "14" ] []
, Svg.line [ x1 "21", y1 "18", x2 "3", y2 "18" ] []
]
    |> customIcon
    |> withSize 2.1
    |> withSizeUnit "em"
    |> toHtml []

Example output:

Feather Icons List

activity : Icon

activity

airplay : Icon

airplay

alert-circle

alert-octagon

alert-triangle

align-center

align-justify

alignLeft : Icon

align-left

alignRight : Icon

align-right

anchor : Icon

anchor

aperture : Icon

aperture

arrow-down-left

arrow-down-right

arrowDown : Icon

arrow-down

arrowLeft : Icon

arrow-left

arrowRight : Icon

arrow-right

arrow-up-left

arrow-up-right

arrowUp : Icon

arrow-up

atSign : Icon

at-sign

award : Icon

award

barChart2 : Icon

bar-chart-2

barChart : Icon

bar-chart

battery-charging

battery : Icon

battery

bellOff : Icon

bell-off

bell : Icon

bell

bluetooth : Icon

bluetooth

bold : Icon

bold

book : Icon

book

bookmark : Icon

bookmark

box : Icon

box

briefcase : Icon

briefcase

calendar : Icon

calendar

cameraOff : Icon

camera-off

camera : Icon

camera

cast : Icon

cast

check-circle

check-square

check : Icon

check

chevron-down

chevron-left

chevron-right

chevronUp : Icon

chevron-up

chevrons-down

chevrons-left

chevrons-right

chevronsUp : Icon

chevrons-up

chrome : Icon

chrome

circle : Icon

circle

clipboard : Icon

clipboard

clock : Icon

clock

cloud-drizzle

cloud-lightning

cloudOff : Icon

cloud-off

cloudRain : Icon

cloud-rain

cloudSnow : Icon

cloud-snow

cloud : Icon

cloud

codepen : Icon

codepen

command : Icon

command

compass : Icon

compass

copy : Icon

copy

corner-down-left

corner-down-right

corner-left-down

corner-left-up

corner-right-down

corner-right-up

corner-up-left

corner-up-right

cpu : Icon

cpu

creditCard : Icon

credit-card

crop : Icon

crop

crosshair : Icon

crosshair

delete : Icon

delete

disc : Icon

disc

download-cloud

download : Icon

download

droplet : Icon

droplet

edit2 : Icon

edit-2

edit3 : Icon

edit-3

edit : Icon

edit

eyeOff : Icon

eye-off

eye : Icon

eye

facebook : Icon

facebook

fast-forward

feather : Icon

feather

fileMinus : Icon

file-minus

filePlus : Icon

file-plus

fileText : Icon

file-text

file : Icon

file

film : Icon

film

filter : Icon

filter

flag : Icon

flag

folder : Icon

folder

github : Icon

github

gitlab : Icon

gitlab

globe : Icon

globe

grid : Icon

grid

hash : Icon

hash

headphones : Icon

headphones

heart : Icon

heart

helpCircle : Icon

help-circle

home : Icon

home

image : Icon

image

inbox : Icon

inbox

info : Icon

info

instagram : Icon

instagram

italic : Icon

italic

layers : Icon

layers

layout : Icon

layout

lifeBuoy : Icon

life-buoy

link2 : Icon

link-2

list : Icon

list

loader : Icon

loader

lock : Icon

lock

logIn : Icon

log-in

logOut : Icon

log-out

mail : Icon

mail

mapPin : Icon

map-pin

map : Icon

map

maximize2 : Icon

maximize-2

maximize : Icon

maximize

message-circle

message-square

micOff : Icon

mic-off

mic : Icon

mic

minimize2 : Icon

minimize-2

minimize : Icon

minimize

minus-circle

minus-square

minus : Icon

minus

monitor : Icon

monitor

moon : Icon

moon

more-horizontal

more-vertical

move : Icon

move

music : Icon

music

octagon : Icon

octagon

package : Icon

package

paperclip : Icon

paperclip

pause-circle

pause : Icon

pause

percent : Icon

percent

phoneCall : Icon

phone-call

phone-forwarded

phone-incoming

phone-missed

phoneOff : Icon

phone-off

phone-outgoing

phone : Icon

phone

pieChart : Icon

pie-chart

playCircle : Icon

play-circle

play : Icon

play

plusCircle : Icon

plus-circle

plusSquare : Icon

plus-square

plus : Icon

plus

pocket : Icon

pocket

power : Icon

power

printer : Icon

printer

radio : Icon

radio

refreshCcw : Icon

refresh-ccw

refreshCw : Icon

refresh-cw

repeat : Icon

repeat

rewind : Icon

rewind

rotateCcw : Icon

rotate-ccw

rotateCw : Icon

rotate-cw

save : Icon

save

scissors : Icon

scissors

server : Icon

server

settings : Icon

settings

share2 : Icon

share-2

share : Icon

share

shield : Icon

shield

shopping-cart

shuffle : Icon

shuffle

skipBack : Icon

skip-back

skip-forward

slack : Icon

slack

slash : Icon

slash

sliders : Icon

sliders

smartphone : Icon

smartphone

speaker : Icon

speaker

square : Icon

square

star : Icon

star

stopCircle : Icon

stop-circle

sun : Icon

sun

sunrise : Icon

sunrise

sunset : Icon

sunset

tablet : Icon

tablet

tag : Icon

tag

target : Icon

target

thermometer

thumbsDown : Icon

thumbs-down

thumbsUp : Icon

thumbs-up

toggleLeft : Icon

toggle-left

toggle-right

trash2 : Icon

trash-2

trash : Icon

trash

trending-down

trendingUp : Icon

trending-up

triangle : Icon

triangle

tv : Icon

tv

twitter : Icon

twitter

type_ : Icon

type

umbrella : Icon

umbrella

underline : Icon

underline

unlock : Icon

unlock

upload-cloud

upload : Icon

upload

userCheck : Icon

user-check

userMinus : Icon

user-minus

userPlus : Icon

user-plus

userX : Icon

user-x

user : Icon

user

users : Icon

users

videoOff : Icon

video-off

video : Icon

video

voicemail : Icon

voicemail

volume1 : Icon

volume-1

volume2 : Icon

volume-2

volumeX : Icon

volume-x

volume : Icon

volume

watch : Icon

watch

wifiOff : Icon

wifi-off

wifi : Icon

wifi

wind : Icon

wind

xCircle : Icon

x-circle

xSquare : Icon

x-square

x : Icon

x

zap : Icon

zap

zoomIn : Icon

zoom-in

zoomOut : Icon

zoom-out

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera