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.
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 ]
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 []
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 []
activity : Icon
activity
airplay : Icon
airplay
alertCircle : Icon
alert-circle
alertOctagon : Icon
alert-octagon
alertTriangle : Icon
alert-triangle
alignCenter : Icon
align-center
alignJustify : Icon
align-justify
alignLeft : Icon
align-left
alignRight : Icon
align-right
anchor : Icon
anchor
aperture : Icon
aperture
archive : Icon
archive
arrowDownCircle : Icon
arrow-down-circle
arrowDownLeft : Icon
arrow-down-left
arrowDownRight : Icon
arrow-down-right
arrowDown : Icon
arrow-down
arrowLeftCircle : Icon
arrow-left-circle
arrowLeft : Icon
arrow-left
arrowRightCircle : Icon
arrow-right-circle
arrowRight : Icon
arrow-right
arrowUpCircle : Icon
arrow-up-circle
arrowUpLeft : Icon
arrow-up-left
arrowUpRight : Icon
arrow-up-right
arrowUp : Icon
arrow-up
atSign : Icon
at-sign
award : Icon
award
barChart2 : Icon
bar-chart-2
barChart : Icon
bar-chart
batteryCharging : Icon
battery-charging
battery : Icon
battery
bellOff : Icon
bell-off
bell : Icon
bell
bluetooth : Icon
bluetooth
bold : Icon
bold
bookOpen : Icon
book-open
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
checkCircle : Icon
check-circle
checkSquare : Icon
check-square
check : Icon
check
chevronDown : Icon
chevron-down
chevronLeft : Icon
chevron-left
chevronRight : Icon
chevron-right
chevronUp : Icon
chevron-up
chevronsDown : Icon
chevrons-down
chevronsLeft : Icon
chevrons-left
chevronsRight : Icon
chevrons-right
chevronsUp : Icon
chevrons-up
chrome : Icon
chrome
circle : Icon
circle
clipboard : Icon
clipboard
clock : Icon
clock
cloudDrizzle : Icon
cloud-drizzle
cloudLightning : Icon
cloud-lightning
cloudOff : Icon
cloud-off
cloudRain : Icon
cloud-rain
cloudSnow : Icon
cloud-snow
cloud : Icon
cloud
code : Icon
code
codepen : Icon
codepen
command : Icon
command
compass : Icon
compass
copy : Icon
copy
cornerDownLeft : Icon
corner-down-left
cornerDownRight : Icon
corner-down-right
cornerLeftDown : Icon
corner-left-down
cornerLeftUp : Icon
corner-left-up
cornerRightDown : Icon
corner-right-down
cornerRightUp : Icon
corner-right-up
cornerUpLeft : Icon
corner-up-left
cornerUpRight : Icon
corner-up-right
cpu : Icon
cpu
creditCard : Icon
credit-card
crop : Icon
crop
crosshair : Icon
crosshair
database : Icon
database
delete : Icon
delete
disc : Icon
disc
dollarSign : Icon
dollar-sign
downloadCloud : Icon
download-cloud
download : Icon
download
droplet : Icon
droplet
edit2 : Icon
edit-2
edit3 : Icon
edit-3
edit : Icon
edit
externalLink : Icon
external-link
eyeOff : Icon
eye-off
eye : Icon
eye
facebook : Icon
facebook
fastForward : Icon
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
folderMinus : Icon
folder-minus
folderPlus : Icon
folder-plus
folder : Icon
folder
gift : Icon
gift
gitBranch : Icon
git-branch
gitCommit : Icon
git-commit
gitMerge : Icon
git-merge
gitPullRequest : Icon
git-pull-request
github : Icon
github
gitlab : Icon
gitlab
globe : Icon
globe
grid : Icon
grid
hardDrive : Icon
hard-drive
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
link : Icon
link
linkedin : Icon
linkedin
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
menu : Icon
menu
messageCircle : Icon
message-circle
messageSquare : Icon
message-square
micOff : Icon
mic-off
mic : Icon
mic
minimize2 : Icon
minimize-2
minimize : Icon
minimize
minusCircle : Icon
minus-circle
minusSquare : Icon
minus-square
minus : Icon
minus
monitor : Icon
monitor
moon : Icon
moon
moreHorizontal : Icon
more-horizontal
moreVertical : Icon
more-vertical
move : Icon
move
music : Icon
music
navigation2 : Icon
navigation-2
navigation : Icon
navigation
octagon : Icon
octagon
package : Icon
package
paperclip : Icon
paperclip
pauseCircle : Icon
pause-circle
pause : Icon
pause
percent : Icon
percent
phoneCall : Icon
phone-call
phoneForwarded : Icon
phone-forwarded
phoneIncoming : Icon
phone-incoming
phoneMissed : Icon
phone-missed
phoneOff : Icon
phone-off
phoneOutgoing : Icon
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
rss : Icon
rss
save : Icon
save
scissors : Icon
scissors
search : Icon
search
send : Icon
send
server : Icon
server
settings : Icon
settings
share2 : Icon
share-2
share : Icon
share
shieldOff : Icon
shield-off
shield : Icon
shield
shoppingBag : Icon
shopping-bag
shoppingCart : Icon
shopping-cart
shuffle : Icon
shuffle
sidebar : Icon
sidebar
skipBack : Icon
skip-back
skipForward : Icon
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
terminal : Icon
terminal
thermometer : Icon
thermometer
thumbsDown : Icon
thumbs-down
thumbsUp : Icon
thumbs-up
toggleLeft : Icon
toggle-left
toggleRight : Icon
toggle-right
trash2 : Icon
trash-2
trash : Icon
trash
trendingDown : Icon
trending-down
trendingUp : Icon
trending-up
triangle : Icon
triangle
truck : Icon
truck
tv : Icon
tv
twitter : Icon
twitter
type_ : Icon
type
umbrella : Icon
umbrella
underline : Icon
underline
unlock : Icon
unlock
uploadCloud : Icon
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
youtube : Icon
youtube
zapOff : Icon
zap-off
zap : Icon
zap
zoomIn : Icon
zoom-in
zoomOut : Icon
zoom-out