feathericons / elm-feather / 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 (Svg.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 ]

icons : Dict String Icon

Dictionary of all icons

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 : Basics.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 : Basics.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 Basics.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 26
    |> withViewBox "0 0 26 26"
    |> toHtml []

Example output:

withViewBox : String -> Icon -> Icon

Set viewBox attribute for a custom icon

Icon.custom [ customSvgPathFittingWithin100pxSquare ]
    |> Icon.withViewBox "0 0 100 100"
    |> Icon.toHtml []

Feather Icons List

activity : Icon

activity

image

airplay : Icon

airplay

image

alertCircle : Icon

alert-circle

image

alertOctagon : Icon

alert-octagon

image

alertTriangle : Icon

alert-triangle

image

alignCenter : Icon

align-center

image

alignJustify : Icon

align-justify

image

alignLeft : Icon

align-left

image

alignRight : Icon

align-right

image

anchor : Icon

anchor

image

aperture : Icon

aperture

image

archive : Icon

archive

image

arrowDownCircle : Icon

arrow-down-circle

image

arrowDownLeft : Icon

arrow-down-left

image

arrowDownRight : Icon

arrow-down-right

image

arrowDown : Icon

arrow-down

image

arrowLeftCircle : Icon

arrow-left-circle

image

arrowLeft : Icon

arrow-left

image

arrowRightCircle : Icon

arrow-right-circle

image

arrowRight : Icon

arrow-right

image

arrowUpCircle : Icon

arrow-up-circle

image

arrowUpLeft : Icon

arrow-up-left

image

arrowUpRight : Icon

arrow-up-right

image

arrowUp : Icon

arrow-up

image

atSign : Icon

at-sign

image

award : Icon

award

image

barChart2 : Icon

bar-chart-2

image

barChart : Icon

bar-chart

image

batteryCharging : Icon

battery-charging

image

battery : Icon

battery

image

bellOff : Icon

bell-off

image

bell : Icon

bell

image

bluetooth : Icon

bluetooth

image

bold : Icon

bold

image

bookOpen : Icon

book-open

image

book : Icon

book

image

bookmark : Icon

bookmark

image

box : Icon

box

image

briefcase : Icon

briefcase

image

calendar : Icon

calendar

image

cameraOff : Icon

camera-off

image

camera : Icon

camera

image

cast : Icon

cast

image

checkCircle : Icon

check-circle

image

checkSquare : Icon

check-square

image

check : Icon

check

image

chevronDown : Icon

chevron-down

image

chevronLeft : Icon

chevron-left

image

chevronRight : Icon

chevron-right

image

chevronUp : Icon

chevron-up

image

chevronsDown : Icon

chevrons-down

image

chevronsLeft : Icon

chevrons-left

image

chevronsRight : Icon

chevrons-right

image

chevronsUp : Icon

chevrons-up

image

chrome : Icon

chrome

image

circle : Icon

circle

image

clipboard : Icon

clipboard

image

clock : Icon

clock

image

cloudDrizzle : Icon

cloud-drizzle

image

cloudLightning : Icon

cloud-lightning

image

cloudOff : Icon

cloud-off

image

cloudRain : Icon

cloud-rain

image

cloudSnow : Icon

cloud-snow

image

cloud : Icon

cloud

image

code : Icon

code

image

codepen : Icon

codepen

image

codesandbox : Icon

codesandbox

image

coffee : Icon

coffee

image

columns : Icon

columns

image

command : Icon

command

image

compass : Icon

compass

image

copy : Icon

copy

image

cornerDownLeft : Icon

corner-down-left

image

cornerDownRight : Icon

corner-down-right

image

cornerLeftDown : Icon

corner-left-down

image

cornerLeftUp : Icon

corner-left-up

image

cornerRightDown : Icon

corner-right-down

image

cornerRightUp : Icon

corner-right-up

image

cornerUpLeft : Icon

corner-up-left

image

cornerUpRight : Icon

corner-up-right

image

cpu : Icon

cpu

image

creditCard : Icon

credit-card

image

crop : Icon

crop

image

crosshair : Icon

crosshair

image

database : Icon

database

image

delete : Icon

delete

image

disc : Icon

disc

image

divideCircle : Icon

divide-circle

image

divideSquare : Icon

divide-square

image

divide : Icon

divide

image

dollarSign : Icon

dollar-sign

image

downloadCloud : Icon

download-cloud

image

download : Icon

download

image

dribbble : Icon

dribbble

image

droplet : Icon

droplet

image

edit2 : Icon

edit-2

image

edit3 : Icon

edit-3

image

edit : Icon

edit

image

externalLink : Icon

external-link

image

eyeOff : Icon

eye-off

image

eye : Icon

eye

image

facebook : Icon

facebook

image

fastForward : Icon

fast-forward

image

feather : Icon

feather

image

figma : Icon

figma

image

fileMinus : Icon

file-minus

image

filePlus : Icon

file-plus

image

fileText : Icon

file-text

image

file : Icon

file

image

film : Icon

film

image

filter : Icon

filter

image

flag : Icon

flag

image

folderMinus : Icon

folder-minus

image

folderPlus : Icon

folder-plus

image

folder : Icon

folder

image

framer : Icon

framer

image

frown : Icon

frown

image

gift : Icon

gift

image

gitBranch : Icon

git-branch

image

gitCommit : Icon

git-commit

image

gitMerge : Icon

git-merge

image

gitPullRequest : Icon

git-pull-request

image

github : Icon

github

image

gitlab : Icon

gitlab

image

globe : Icon

globe

image

grid : Icon

grid

image

hardDrive : Icon

hard-drive

image

hash : Icon

hash

image

headphones : Icon

headphones

image

heart : Icon

heart

image

helpCircle : Icon

help-circle

image

hexagon : Icon

hexagon

image

home : Icon

home

image

image : Icon

image

image

inbox : Icon

inbox

image

info : Icon

info

image

instagram : Icon

instagram

image

italic : Icon

italic

image

key : Icon

key

image

layers : Icon

layers

image

layout : Icon

layout

image

lifeBuoy : Icon

life-buoy

image

link2 : Icon

link-2

image

link : Icon

link

image

linkedin : Icon

linkedin

image

list : Icon

list

image

loader : Icon

loader

image

lock : Icon

lock

image

logIn : Icon

log-in

image

logOut : Icon

log-out

image

mail : Icon

mail

image

mapPin : Icon

map-pin

image

map : Icon

map

image

maximize2 : Icon

maximize-2

image

maximize : Icon

maximize

image

meh : Icon

meh

image

menu : Icon

menu

image

messageCircle : Icon

message-circle

image

messageSquare : Icon

message-square

image

micOff : Icon

mic-off

image

mic : Icon

mic

image

minimize2 : Icon

minimize-2

image

minimize : Icon

minimize

image

minusCircle : Icon

minus-circle

image

minusSquare : Icon

minus-square

image

minus : Icon

minus

image

monitor : Icon

monitor

image

moon : Icon

moon

image

moreHorizontal : Icon

more-horizontal

image

moreVertical : Icon

more-vertical

image

mousePointer : Icon

mouse-pointer

image

move : Icon

move

image

music : Icon

music

image

navigation2 : Icon

navigation-2

image

navigation : Icon

navigation

image

octagon : Icon

octagon

image

package : Icon

package

image

paperclip : Icon

paperclip

image

pauseCircle : Icon

pause-circle

image

pause : Icon

pause

image

penTool : Icon

pen-tool

image

percent : Icon

percent

image

phoneCall : Icon

phone-call

image

phoneForwarded : Icon

phone-forwarded

image

phoneIncoming : Icon

phone-incoming

image

phoneMissed : Icon

phone-missed

image

phoneOff : Icon

phone-off

image

phoneOutgoing : Icon

phone-outgoing

image

phone : Icon

phone

image

pieChart : Icon

pie-chart

image

playCircle : Icon

play-circle

image

play : Icon

play

image

plusCircle : Icon

plus-circle

image

plusSquare : Icon

plus-square

image

plus : Icon

plus

image

pocket : Icon

pocket

image

power : Icon

power

image

printer : Icon

printer

image

radio : Icon

radio

image

refreshCcw : Icon

refresh-ccw

image

refreshCw : Icon

refresh-cw

image

repeat : Icon

repeat

image

rewind : Icon

rewind

image

rotateCcw : Icon

rotate-ccw

image

rotateCw : Icon

rotate-cw

image

rss : Icon

rss

image

save : Icon

save

image

scissors : Icon

scissors

image

search : Icon

search

image

send : Icon

send

image

server : Icon

server

image

settings : Icon

settings

image

share2 : Icon

share-2

image

share : Icon

share

image

shieldOff : Icon

shield-off

image

shield : Icon

shield

image

shoppingBag : Icon

shopping-bag

image

shoppingCart : Icon

shopping-cart

image

shuffle : Icon

shuffle

image

sidebar : Icon

sidebar

image

skipBack : Icon

skip-back

image

skipForward : Icon

skip-forward

image

slack : Icon

slack

image

slash : Icon

slash

image

sliders : Icon

sliders

image

smartphone : Icon

smartphone

image

smile : Icon

smile

image

speaker : Icon

speaker

image

square : Icon

square

image

star : Icon

star

image

stopCircle : Icon

stop-circle

image

sun : Icon

sun

image

sunrise : Icon

sunrise

image

sunset : Icon

sunset

image

tablet : Icon

tablet

image

tag : Icon

tag

image

target : Icon

target

image

terminal : Icon

terminal

image

thermometer : Icon

thermometer

image

thumbsDown : Icon

thumbs-down

image

thumbsUp : Icon

thumbs-up

image

toggleLeft : Icon

toggle-left

image

toggleRight : Icon

toggle-right

image

tool : Icon

tool

image

trash2 : Icon

trash-2

image

trash : Icon

trash

image

trello : Icon

trello

image

trendingDown : Icon

trending-down

image

trendingUp : Icon

trending-up

image

triangle : Icon

triangle

image

truck : Icon

truck

image

tv : Icon

tv

image

twitch : Icon

twitch

image

twitter : Icon

twitter

image

type_ : Icon

type

image

umbrella : Icon

umbrella

image

underline : Icon

underline

image

unlock : Icon

unlock

image

uploadCloud : Icon

upload-cloud

image

upload : Icon

upload

image

userCheck : Icon

user-check

image

userMinus : Icon

user-minus

image

userPlus : Icon

user-plus

image

userX : Icon

user-x

image

user : Icon

user

image

users : Icon

users

image

videoOff : Icon

video-off

image

video : Icon

video

image

voicemail : Icon

voicemail

image

volume1 : Icon

volume-1

image

volume2 : Icon

volume-2

image

volumeX : Icon

volume-x

image

volume : Icon

volume

image

watch : Icon

watch

image

wifiOff : Icon

wifi-off

image

wifi : Icon

wifi

image

wind : Icon

wind

image

xCircle : Icon

x-circle

image

xOctagon : Icon

x-octagon

image

xSquare : Icon

x-square

image

x : Icon

x

image

youtube : Icon

youtube

image

zapOff : Icon

zap-off

image

zap : Icon

zap

image

zoomIn : Icon

zoom-in

image

zoomOut : Icon

zoom-out

image