not1602 / 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 ]

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

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

dollarSign : Icon

dollar-sign image

downloadCloud : Icon

download-cloud image

download : Icon

download 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

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

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

home : Icon

home image

image : Icon

image image

inbox : Icon

inbox image

info : Icon

info image

instagram : Icon

instagram image

italic : Icon

italic 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

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

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

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

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

trash2 : Icon

trash-2 image

trash : Icon

trash image

trendingDown : Icon

trending-down image

trendingUp : Icon

trending-up image

triangle : Icon

triangle image

truck : Icon

truck image

tv : Icon

tv 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

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