pehota / elm-zondicons / Zondicons

A port of Steve Schoger's Zondicons collection

Customizing Icons Color

For convenience sake by default the icons will take the current color of their parent element, so the preferred way to set colors would be to set something like color: green in CSS for the parent element. If this is not the desired behaviour, a different fill mode can be set using the fill attribute or fill CSS propery of the icon.

CSS:

.parent-element {
  color: red;
}

And later in your Elm code

-- this will make the color of the icon red
div [ class "parent-element" ]
    [ -- no need to do anything else - the color will trickle through to the icon
      Zondicons.airplane []
    ]

CSS:

.green-icon {
  fill: green;
}

And later in your Elm code

-- this will make the color of the icon green
Zondicons.airplane [ Svg.Attributes.class "green-icon" ]

or

-- this will make the color of the icon pink
Zondicons.airplane [ Svg.Attributes.fill "pink" ]

Customizing Icons Size

The icons viewBox is set to "0 0 20 20". To resize the icons set either width or height CSS property using either a class or an inline style. The icons' aspect ratio will be kept, so there is no need of specifying both properties.

CSS:

.big-icon {
  width: 50px;
}

And later in your Elm code

-- this will render a 50px x 50px icon
Zondicons.airplane [ Svg.Attributes.class "big-icon" ]

or

-- this will render a 1rem x 1rem icon
Zondicons.airplane [ Svg.Attributes.style "height: 1rem" ]

Icons

addOutline : List (Svg.Attribute msg) -> Html msg

add-outline

addSolid : List (Svg.Attribute msg) -> Html msg

add-solid

adjust : List (Svg.Attribute msg) -> Html msg

adjust

airplane : List (Svg.Attribute msg) -> Html msg

airplane

album : List (Svg.Attribute msg) -> Html msg

album

alignCenter : List (Svg.Attribute msg) -> Html msg

align-center

alignJustified : List (Svg.Attribute msg) -> Html msg

align-justified

alignLeft : List (Svg.Attribute msg) -> Html msg

align-left

alignRight : List (Svg.Attribute msg) -> Html msg

align-right

anchor : List (Svg.Attribute msg) -> Html msg

anchor

announcement : List (Svg.Attribute msg) -> Html msg

announcement

apparel : List (Svg.Attribute msg) -> Html msg

apparel

arrowDown : List (Svg.Attribute msg) -> Html msg

arrow-down

arrowLeft : List (Svg.Attribute msg) -> Html msg

arrow-left

arrowOutlineDown : List (Svg.Attribute msg) -> Html msg

arrow-outline-down

arrowOutlineLeft : List (Svg.Attribute msg) -> Html msg

arrow-outline-left

arrowOutlineRight : List (Svg.Attribute msg) -> Html msg

arrow-outline-right

arrowOutlineUp : List (Svg.Attribute msg) -> Html msg

arrow-outline-up

arrowRight : List (Svg.Attribute msg) -> Html msg

arrow-right

arrowThickDown : List (Svg.Attribute msg) -> Html msg

arrow-thick-down

arrowThickLeft : List (Svg.Attribute msg) -> Html msg

arrow-thick-left

arrowThickRight : List (Svg.Attribute msg) -> Html msg

arrow-thick-right

arrowThickUp : List (Svg.Attribute msg) -> Html msg

arrow-thick-up

arrowThinDown : List (Svg.Attribute msg) -> Html msg

arrow-thin-down

arrowThinLeft : List (Svg.Attribute msg) -> Html msg

arrow-thin-left

arrowThinRight : List (Svg.Attribute msg) -> Html msg

arrow-thin-right

arrowThinUp : List (Svg.Attribute msg) -> Html msg

arrow-thin-up

arrowUp : List (Svg.Attribute msg) -> Html msg

arrow-up

artist : List (Svg.Attribute msg) -> Html msg

artist

atSymbol : List (Svg.Attribute msg) -> Html msg

at-symbol

attachment : List (Svg.Attribute msg) -> Html msg

attachment

backspace : List (Svg.Attribute msg) -> Html msg

backspace

backwardStep : List (Svg.Attribute msg) -> Html msg

backward-step

backward : List (Svg.Attribute msg) -> Html msg

backward

badge : List (Svg.Attribute msg) -> Html msg

badge

batteryFull : List (Svg.Attribute msg) -> Html msg

battery-full

batteryHalf : List (Svg.Attribute msg) -> Html msg

battery-half

batteryLow : List (Svg.Attribute msg) -> Html msg

battery-low

beverage : List (Svg.Attribute msg) -> Html msg

beverage

block : List (Svg.Attribute msg) -> Html msg

block

bluetooth : List (Svg.Attribute msg) -> Html msg

bluetooth

bolt : List (Svg.Attribute msg) -> Html msg

bolt

bookReference : List (Svg.Attribute msg) -> Html msg

book-reference

bookmarkCopy2 : List (Svg.Attribute msg) -> Html msg

bookmark copy 2

bookmarkCopy3 : List (Svg.Attribute msg) -> Html msg

bookmark copy 3

bookmarkOutlineAdd : List (Svg.Attribute msg) -> Html msg

bookmark-outline-add

bookmarkOutline : List (Svg.Attribute msg) -> Html msg

bookmark-outline

bookmark : List (Svg.Attribute msg) -> Html msg

bookmark

borderAll : List (Svg.Attribute msg) -> Html msg

border-all

borderBottom : List (Svg.Attribute msg) -> Html msg

border-bottom

borderHorizontal : List (Svg.Attribute msg) -> Html msg

border-horizontal

borderInner : List (Svg.Attribute msg) -> Html msg

border-inner

borderLeft : List (Svg.Attribute msg) -> Html msg

border-left

borderNone : List (Svg.Attribute msg) -> Html msg

border-none

borderOuter : List (Svg.Attribute msg) -> Html msg

border-outer

borderRight : List (Svg.Attribute msg) -> Html msg

border-right

borderTop : List (Svg.Attribute msg) -> Html msg

border-top

borderVertical : List (Svg.Attribute msg) -> Html msg

border-vertical

box : List (Svg.Attribute msg) -> Html msg

box

brightnessDown : List (Svg.Attribute msg) -> Html msg

brightness-down

brightnessUp : List (Svg.Attribute msg) -> Html msg

brightness-up

browserWindowNew : List (Svg.Attribute msg) -> Html msg

browser-window-new

browserWindowOpen : List (Svg.Attribute msg) -> Html msg

browser-window-open

browserWindow : List (Svg.Attribute msg) -> Html msg

browser-window

bug : List (Svg.Attribute msg) -> Html msg

bug

buoy : List (Svg.Attribute msg) -> Html msg

buoy

calculator : List (Svg.Attribute msg) -> Html msg

calculator

calendar : List (Svg.Attribute msg) -> Html msg

calendar

camera : List (Svg.Attribute msg) -> Html msg

camera

chartBar : List (Svg.Attribute msg) -> Html msg

chart-bar

chartPie : List (Svg.Attribute msg) -> Html msg

chart-pie

chart : List (Svg.Attribute msg) -> Html msg

chart

chatBubbleDots : List (Svg.Attribute msg) -> Html msg

chat-bubble-dots

checkmarkOutline : List (Svg.Attribute msg) -> Html msg

checkmark-outline

checkmark : List (Svg.Attribute msg) -> Html msg

checkmark

cheveronDown : List (Svg.Attribute msg) -> Html msg

cheveron-down

cheveronLeft : List (Svg.Attribute msg) -> Html msg

cheveron-left

cheveronOutlineDown : List (Svg.Attribute msg) -> Html msg

cheveron-outline-down

cheveronOutlineLeft : List (Svg.Attribute msg) -> Html msg

cheveron-outline-left

cheveronOutlineRight : List (Svg.Attribute msg) -> Html msg

cheveron-outline-right

cheveronOutlineUp : List (Svg.Attribute msg) -> Html msg

cheveron-outline-up

cheveronRight : List (Svg.Attribute msg) -> Html msg

cheveron-right

cheveronUp : List (Svg.Attribute msg) -> Html msg

cheveron-up

clipboard : List (Svg.Attribute msg) -> Html msg

clipboard

closeOutline : List (Svg.Attribute msg) -> Html msg

close-outline

closeSolid : List (Svg.Attribute msg) -> Html msg

close-solid

close : List (Svg.Attribute msg) -> Html msg

close

cloudUpload : List (Svg.Attribute msg) -> Html msg

cloud-upload

cloud : List (Svg.Attribute msg) -> Html msg

cloud

code : List (Svg.Attribute msg) -> Html msg

code

coffee : List (Svg.Attribute msg) -> Html msg

coffee

cog : List (Svg.Attribute msg) -> Html msg

cog

colorPalette : List (Svg.Attribute msg) -> Html msg

color-palette

compose : List (Svg.Attribute msg) -> Html msg

compose

computerDesktop : List (Svg.Attribute msg) -> Html msg

computer-desktop

computerLaptop : List (Svg.Attribute msg) -> Html msg

computer-laptop

conversation : List (Svg.Attribute msg) -> Html msg

conversation

copy : List (Svg.Attribute msg) -> Html msg

copy

creditCard : List (Svg.Attribute msg) -> Html msg

credit-card

currencyDollar : List (Svg.Attribute msg) -> Html msg

currency-dollar

dashboard : List (Svg.Attribute msg) -> Html msg

dashboard

dateAdd : List (Svg.Attribute msg) -> Html msg

date-add

dialPad : List (Svg.Attribute msg) -> Html msg

dial-pad

directions : List (Svg.Attribute msg) -> Html msg

directions

documentAdd : List (Svg.Attribute msg) -> Html msg

document-add

document : List (Svg.Attribute msg) -> Html msg

document

dotsHorizontalDouble : List (Svg.Attribute msg) -> Html msg

dots-horizontal-double

dotsHorizontalTriple : List (Svg.Attribute msg) -> Html msg

dots-horizontal-triple

download : List (Svg.Attribute msg) -> Html msg

download

duplicate : List (Svg.Attribute msg) -> Html msg

duplicate

editCopy : List (Svg.Attribute msg) -> Html msg

edit-copy

editCrop : List (Svg.Attribute msg) -> Html msg

edit-crop

editCut : List (Svg.Attribute msg) -> Html msg

edit-cut

editPencil : List (Svg.Attribute msg) -> Html msg

edit-pencil

education : List (Svg.Attribute msg) -> Html msg

education

envelope : List (Svg.Attribute msg) -> Html msg

envelope

exclamationOutline : List (Svg.Attribute msg) -> Html msg

exclamation-outline

exclamationSolid : List (Svg.Attribute msg) -> Html msg

exclamation-solid

explore : List (Svg.Attribute msg) -> Html msg

explore

factory : List (Svg.Attribute msg) -> Html msg

factory

fastForward : List (Svg.Attribute msg) -> Html msg

fast-forward

fastRewind : List (Svg.Attribute msg) -> Html msg

fast-rewind

film : List (Svg.Attribute msg) -> Html msg

film

filter : List (Svg.Attribute msg) -> Html msg

filter

flag : List (Svg.Attribute msg) -> Html msg

flag

flashlight : List (Svg.Attribute msg) -> Html msg

flashlight

folderOutlineAdd : List (Svg.Attribute msg) -> Html msg

folder-outline-add

folderOutline : List (Svg.Attribute msg) -> Html msg

folder-outline

folder : List (Svg.Attribute msg) -> Html msg

folder

formatBold : List (Svg.Attribute msg) -> Html msg

format-bold

formatFontSize : List (Svg.Attribute msg) -> Html msg

format-font-size

formatItalic : List (Svg.Attribute msg) -> Html msg

format-italic

formatTextSize : List (Svg.Attribute msg) -> Html msg

format-text-size

formatUnderline : List (Svg.Attribute msg) -> Html msg

format-underline

forwardStep : List (Svg.Attribute msg) -> Html msg

forward-step

forward : List (Svg.Attribute msg) -> Html msg

forward

gift : List (Svg.Attribute msg) -> Html msg

gift

globe : List (Svg.Attribute msg) -> Html msg

globe

handStop : List (Svg.Attribute msg) -> Html msg

hand-stop

hardDrive : List (Svg.Attribute msg) -> Html msg

hard-drive

headphones : List (Svg.Attribute msg) -> Html msg

headphones

heart : List (Svg.Attribute msg) -> Html msg

heart

home : List (Svg.Attribute msg) -> Html msg

home

hot : List (Svg.Attribute msg) -> Html msg

hot

hourGlass : List (Svg.Attribute msg) -> Html msg

hour-glass

inboxCheck : List (Svg.Attribute msg) -> Html msg

inbox-check

inboxDownload : List (Svg.Attribute msg) -> Html msg

inbox-download

inboxFull : List (Svg.Attribute msg) -> Html msg

inbox-full

inbox : List (Svg.Attribute msg) -> Html msg

inbox

indentDecrease : List (Svg.Attribute msg) -> Html msg

indent-decrease

indentIncrease : List (Svg.Attribute msg) -> Html msg

indent-increase

informationOutline : List (Svg.Attribute msg) -> Html msg

information-outline

informationSolid : List (Svg.Attribute msg) -> Html msg

information-solid

key : List (Svg.Attribute msg) -> Html msg

key

keyboard : List (Svg.Attribute msg) -> Html msg

keyboard

layers : List (Svg.Attribute msg) -> Html msg

layers

library : List (Svg.Attribute msg) -> Html msg

library

lightBulb : List (Svg.Attribute msg) -> Html msg

light-bulb

link : List (Svg.Attribute msg) -> Html msg

link

listAdd : List (Svg.Attribute msg) -> Html msg

list-add

listBullet : List (Svg.Attribute msg) -> Html msg

list-bullet

list : List (Svg.Attribute msg) -> Html msg

list

loadBalancer : List (Svg.Attribute msg) -> Html msg

load-balancer

locationCurrent : List (Svg.Attribute msg) -> Html msg

location-current

locationFood : List (Svg.Attribute msg) -> Html msg

location-food

locationGasStation : List (Svg.Attribute msg) -> Html msg

location-gas-station

locationHotel : List (Svg.Attribute msg) -> Html msg

location-hotel

locationMarina : List (Svg.Attribute msg) -> Html msg

location-marina

locationPark : List (Svg.Attribute msg) -> Html msg

location-park

locationRestroom : List (Svg.Attribute msg) -> Html msg

location-restroom

locationShopping : List (Svg.Attribute msg) -> Html msg

location-shopping

location : List (Svg.Attribute msg) -> Html msg

location

lockClosed : List (Svg.Attribute msg) -> Html msg

lock-closed

lockOpen : List (Svg.Attribute msg) -> Html msg

lock-open

map : List (Svg.Attribute msg) -> Html msg

map

menu : List (Svg.Attribute msg) -> Html msg

menu

mic : List (Svg.Attribute msg) -> Html msg

mic

minusOutline : List (Svg.Attribute msg) -> Html msg

minus-outline

minusSolid : List (Svg.Attribute msg) -> Html msg

minus-solid

mobileDevices : List (Svg.Attribute msg) -> Html msg

mobile-devices

moodHappyOutline : List (Svg.Attribute msg) -> Html msg

mood-happy-outline

moodHappySolid : List (Svg.Attribute msg) -> Html msg

mood-happy-solid

moodNeutralOutline : List (Svg.Attribute msg) -> Html msg

mood-neutral-outline

moodNeutralSolid : List (Svg.Attribute msg) -> Html msg

mood-neutral-solid

moodSadOutline : List (Svg.Attribute msg) -> Html msg

mood-sad-outline

moodSadSolid : List (Svg.Attribute msg) -> Html msg

mood-sad-solid

mouse : List (Svg.Attribute msg) -> Html msg

mouse

musicAlbum : List (Svg.Attribute msg) -> Html msg

music-album

musicArtist : List (Svg.Attribute msg) -> Html msg

music-artist

musicNotes : List (Svg.Attribute msg) -> Html msg

music-notes

musicPlaylist : List (Svg.Attribute msg) -> Html msg

music-playlist

navigationMore : List (Svg.Attribute msg) -> Html msg

navigation-more

network : List (Svg.Attribute msg) -> Html msg

network

newsPaper : List (Svg.Attribute msg) -> Html msg

news-paper

notification : List (Svg.Attribute msg) -> Html msg

notification

notificationsOutline : List (Svg.Attribute msg) -> Html msg

notifications-outline

notifications : List (Svg.Attribute msg) -> Html msg

notifications

paste : List (Svg.Attribute msg) -> Html msg

paste

pauseOutline : List (Svg.Attribute msg) -> Html msg

pause-outline

pauseSolid : List (Svg.Attribute msg) -> Html msg

pause-solid

pause : List (Svg.Attribute msg) -> Html msg

pause

penTool : List (Svg.Attribute msg) -> Html msg

pen-tool

phone : List (Svg.Attribute msg) -> Html msg

phone

photo : List (Svg.Attribute msg) -> Html msg

photo

phpElephant : List (Svg.Attribute msg) -> Html msg

php-elephant

pin : List (Svg.Attribute msg) -> Html msg

pin

playOutline : List (Svg.Attribute msg) -> Html msg

play-outline

play : List (Svg.Attribute msg) -> Html msg

play

playlist : List (Svg.Attribute msg) -> Html msg

playlist

plugin : List (Svg.Attribute msg) -> Html msg

plugin

portfolio : List (Svg.Attribute msg) -> Html msg

portfolio

printer : List (Svg.Attribute msg) -> Html msg

printer

pylon : List (Svg.Attribute msg) -> Html msg

pylon

question : List (Svg.Attribute msg) -> Html msg

question

queue : List (Svg.Attribute msg) -> Html msg

queue

radarCopy2 : List (Svg.Attribute msg) -> Html msg

radar copy 2

radar : List (Svg.Attribute msg) -> Html msg

radar

radio : List (Svg.Attribute msg) -> Html msg

radio

refresh : List (Svg.Attribute msg) -> Html msg

refresh

reload : List (Svg.Attribute msg) -> Html msg

reload

replyAll : List (Svg.Attribute msg) -> Html msg

reply-all

reply : List (Svg.Attribute msg) -> Html msg

reply

repost : List (Svg.Attribute msg) -> Html msg

repost

saveDisk : List (Svg.Attribute msg) -> Html msg

save-disk

screenFull : List (Svg.Attribute msg) -> Html msg

screen-full

search : List (Svg.Attribute msg) -> Html msg

search

send : List (Svg.Attribute msg) -> Html msg

send

servers : List (Svg.Attribute msg) -> Html msg

servers

share01 : List (Svg.Attribute msg) -> Html msg

share-01

shareAlt : List (Svg.Attribute msg) -> Html msg

share-alt

share : List (Svg.Attribute msg) -> Html msg

share

shield : List (Svg.Attribute msg) -> Html msg

shield

shoppingCart : List (Svg.Attribute msg) -> Html msg

shopping-cart

showSidebar : List (Svg.Attribute msg) -> Html msg

show-sidebar

shuffle : List (Svg.Attribute msg) -> Html msg

shuffle

standBy : List (Svg.Attribute msg) -> Html msg

stand-by

starFull : List (Svg.Attribute msg) -> Html msg

star-full

station : List (Svg.Attribute msg) -> Html msg

station

stepBackward : List (Svg.Attribute msg) -> Html msg

step-backward

stepForward : List (Svg.Attribute msg) -> Html msg

step-forward

stethoscope : List (Svg.Attribute msg) -> Html msg

stethoscope

storeFront : List (Svg.Attribute msg) -> Html msg

store-front

strokeWidth : List (Svg.Attribute msg) -> Html msg

stroke-width

subdirectoryLeft : List (Svg.Attribute msg) -> Html msg

subdirectory-left

subdirectoryRight : List (Svg.Attribute msg) -> Html msg

subdirectory-right

swap : List (Svg.Attribute msg) -> Html msg

swap

tablet : List (Svg.Attribute msg) -> Html msg

tablet

tag : List (Svg.Attribute msg) -> Html msg

tag

target : List (Svg.Attribute msg) -> Html msg

target

textBox : List (Svg.Attribute msg) -> Html msg

text-box

textDecoration : List (Svg.Attribute msg) -> Html msg

text-decoration

thermometer : List (Svg.Attribute msg) -> Html msg

thermometer

thumbsDown : List (Svg.Attribute msg) -> Html msg

thumbs-down

thumbsUp : List (Svg.Attribute msg) -> Html msg

thumbs-up

ticket : List (Svg.Attribute msg) -> Html msg

ticket

time : List (Svg.Attribute msg) -> Html msg

time

timer : List (Svg.Attribute msg) -> Html msg

timer

toolsCopy : List (Svg.Attribute msg) -> Html msg

tools copy

translate : List (Svg.Attribute msg) -> Html msg

translate

trash : List (Svg.Attribute msg) -> Html msg

trash

travelBus : List (Svg.Attribute msg) -> Html msg

travel-bus

travelCar : List (Svg.Attribute msg) -> Html msg

travel-car

travelCase : List (Svg.Attribute msg) -> Html msg

travel-case

travelTaxiCab : List (Svg.Attribute msg) -> Html msg

travel-taxi-cab

travelTrain : List (Svg.Attribute msg) -> Html msg

travel-train

travelWalk : List (Svg.Attribute msg) -> Html msg

travel-walk

travel : List (Svg.Attribute msg) -> Html msg

travel

trophy : List (Svg.Attribute msg) -> Html msg

trophy

tuning : List (Svg.Attribute msg) -> Html msg

tuning

upload : List (Svg.Attribute msg) -> Html msg

upload

usb : List (Svg.Attribute msg) -> Html msg

usb

userAdd : List (Svg.Attribute msg) -> Html msg

user-add

userGroup : List (Svg.Attribute msg) -> Html msg

user-group

userSolidCircle : List (Svg.Attribute msg) -> Html msg

user-solid-circle

userSolidSquare : List (Svg.Attribute msg) -> Html msg

user-solid-square

user : List (Svg.Attribute msg) -> Html msg

user

vector : List (Svg.Attribute msg) -> Html msg

vector

videoCamera : List (Svg.Attribute msg) -> Html msg

video-camera

viewCarousel : List (Svg.Attribute msg) -> Html msg

view-carousel

viewColumn : List (Svg.Attribute msg) -> Html msg

view-column

viewHide : List (Svg.Attribute msg) -> Html msg

view-hide

viewList : List (Svg.Attribute msg) -> Html msg

view-list

viewShow : List (Svg.Attribute msg) -> Html msg

view-show

viewTile : List (Svg.Attribute msg) -> Html msg

view-tile

volumeDown : List (Svg.Attribute msg) -> Html msg

volume-down

volumeMute : List (Svg.Attribute msg) -> Html msg

volume-mute

volumeOff : List (Svg.Attribute msg) -> Html msg

volume-off

volumeUp : List (Svg.Attribute msg) -> Html msg

volume-up

wallet : List (Svg.Attribute msg) -> Html msg

wallet

watch : List (Svg.Attribute msg) -> Html msg

watch

windowNew : List (Svg.Attribute msg) -> Html msg

window-new

windowOpen : List (Svg.Attribute msg) -> Html msg

window-open

window : List (Svg.Attribute msg) -> Html msg

window

wrench : List (Svg.Attribute msg) -> Html msg

wrench

yinYang : List (Svg.Attribute msg) -> Html msg

yin-yang

zoomIn : List (Svg.Attribute msg) -> Html msg

zoom-in

zoomOut : List (Svg.Attribute msg) -> Html msg

zoom-out