A port of Steve Schoger's Zondicons collection
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.addOutline []
]CSS:
.green-icon {
fill: green;
}And later in your Elm code
-- this will make the color of the icon green
Zondicons.addOutline [ Svg.Attributes.class "green-icon" ]or
-- this will make the color of the icon pink
Zondicons.addOutline [ Svg.Attributes.fill "pink" ]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.addOutline [ Svg.Attributes.class "big-icon" ]or
-- this will render a 1rem x 1rem icon
Zondicons.addOutline [ Svg.Attributes.style "height: 1rem" ]Renders the add-solid icon
add-solid
Renders the adjust icon
adjust
Renders the airplane icon
airplane
Renders the album icon
album
Renders the align-center icon
align-center
Renders the align-justified icon
align-justified
Renders the align-left icon
align-left
Renders the align-right icon
align-right
Renders the anchor icon
anchor
Renders the announcement icon
announcement
Renders the apparel icon
apparel
Renders the arrow-down icon
arrow-down
Renders the arrow-left icon
arrow-left
Renders the arrow-outline-down icon
arrow-outline-down
Renders the arrow-outline-left icon
arrow-outline-left
Renders the arrow-outline-right icon
arrow-outline-right
Renders the arrow-outline-up icon
arrow-outline-up
Renders the arrow-right icon
arrow-right
Renders the arrow-thick-down icon
arrow-thick-down
Renders the arrow-thick-left icon
arrow-thick-left
Renders the arrow-thick-right icon
arrow-thick-right
Renders the arrow-thick-up icon
arrow-thick-up
Renders the arrow-thin-down icon
arrow-thin-down
Renders the arrow-thin-left icon
arrow-thin-left
Renders the arrow-thin-right icon
arrow-thin-right
Renders the arrow-thin-up icon
arrow-thin-up
Renders the arrow-up icon
arrow-up
Renders the artist icon
artist
Renders the at-symbol icon
at-symbol
Renders the attachment icon
attachment
Renders the backspace icon
backspace
Renders the backward-step icon
backward-step
Renders the backward icon
backward
Renders the badge icon
badge
Renders the battery-full icon
battery-full
Renders the battery-half icon
battery-half
Renders the battery-low icon
battery-low
Renders the beverage icon
beverage
Renders the block icon
block
Renders the bluetooth icon
bluetooth
Renders the bolt icon
bolt
Renders the book-reference icon
book-reference
Renders the bookmark copy 2 icon
bookmark copy 2
Renders the bookmark copy 3 icon
bookmark copy 3
Renders the bookmark-outline-add icon
bookmark-outline-add
Renders the bookmark-outline icon
bookmark-outline
Renders the bookmark icon
bookmark
Renders the border-all icon
border-all
Renders the border-bottom icon
border-bottom
Renders the border-horizontal icon
border-horizontal
Renders the border-inner icon
border-inner
Renders the border-left icon
border-left
Renders the border-none icon
border-none
Renders the border-outer icon
border-outer
Renders the border-right icon
border-right
Renders the border-top icon
border-top
Renders the border-vertical icon
border-vertical
Renders the box icon
box
Renders the brightness-down icon
brightness-down
Renders the brightness-up icon
brightness-up
Renders the browser-window-new icon
browser-window-new
Renders the browser-window-open icon
browser-window-open
Renders the browser-window icon
browser-window
Renders the bug icon
bug
Renders the buoy icon
buoy
Renders the calculator icon
calculator
Renders the calendar icon
calendar
Renders the camera icon
camera
Renders the chart-bar icon
chart-bar
Renders the chart-pie icon
chart-pie
Renders the chart icon
chart
Renders the chat-bubble-dots icon
chat-bubble-dots
Renders the checkmark-outline icon
checkmark-outline
Renders the checkmark icon
checkmark
Renders the cheveron-down icon
cheveron-down
Renders the cheveron-left icon
cheveron-left
Renders the cheveron-outline-down icon
cheveron-outline-down
Renders the cheveron-outline-left icon
cheveron-outline-left
Renders the cheveron-outline-right icon
cheveron-outline-right
Renders the cheveron-outline-up icon
cheveron-outline-up
Renders the cheveron-right icon
cheveron-right
Renders the cheveron-up icon
cheveron-up
Renders the clipboard icon
clipboard
Renders the close-outline icon
close-outline
Renders the close-solid icon
close-solid
Renders the close icon
close
Renders the cloud-upload icon
cloud-upload
Renders the cloud icon
cloud
Renders the code icon
code
Renders the coffee icon
coffee
Renders the cog icon
cog
Renders the color-palette icon
color-palette
Renders the compose icon
compose
Renders the computer-desktop icon
computer-desktop
Renders the computer-laptop icon
computer-laptop
Renders the conversation icon
conversation
Renders the copy icon
copy
Renders the credit-card icon
credit-card
Renders the currency-dollar icon
currency-dollar
Renders the dashboard icon
dashboard
Renders the date-add icon
date-add
Renders the dial-pad icon
dial-pad
Renders the directions icon
directions
Renders the document-add icon
document-add
Renders the document icon
document
Renders the dots-horizontal-double icon
dots-horizontal-double
Renders the dots-horizontal-triple icon
dots-horizontal-triple
Renders the download icon
download
Renders the duplicate icon
duplicate
Renders the edit-copy icon
edit-copy
Renders the edit-crop icon
edit-crop
Renders the edit-cut icon
edit-cut
Renders the edit-pencil icon
edit-pencil
Renders the education icon
education
Renders the envelope icon
envelope
Renders the exclamation-outline icon
exclamation-outline
Renders the exclamation-solid icon
exclamation-solid
Renders the explore icon
explore
Renders the factory icon
factory
Renders the fast-forward icon
fast-forward
Renders the fast-rewind icon
fast-rewind
Renders the film icon
film
Renders the filter icon
filter
Renders the flag icon
flag
Renders the flashlight icon
flashlight
Renders the folder-outline-add icon
folder-outline-add
Renders the folder-outline icon
folder-outline
Renders the folder icon
folder
Renders the format-bold icon
format-bold
Renders the format-font-size icon
format-font-size
Renders the format-italic icon
format-italic
Renders the format-text-size icon
format-text-size
Renders the format-underline icon
format-underline
Renders the forward-step icon
forward-step
Renders the forward icon
forward
Renders the gift icon
gift
Renders the globe icon
globe
Renders the hand-stop icon
hand-stop
Renders the hard-drive icon
hard-drive
Renders the headphones icon
headphones
Renders the heart icon
heart
Renders the home icon
home
Renders the hot icon
hot
Renders the hour-glass icon
hour-glass
Renders the inbox-check icon
inbox-check
Renders the inbox-download icon
inbox-download
Renders the inbox-full icon
inbox-full
Renders the inbox icon
inbox
Renders the indent-decrease icon
indent-decrease
Renders the indent-increase icon
indent-increase
Renders the information-outline icon
information-outline
Renders the information-solid icon
information-solid
Renders the key icon
key
Renders the keyboard icon
keyboard
Renders the layers icon
layers
Renders the library icon
library
Renders the light-bulb icon
light-bulb
Renders the link icon
link
Renders the list-add icon
list-add
Renders the list-bullet icon
list-bullet
Renders the list icon
list
Renders the load-balancer icon
load-balancer
Renders the location-current icon
location-current
Renders the location-food icon
location-food
Renders the location-gas-station icon
location-gas-station
Renders the location-hotel icon
location-hotel
Renders the location-marina icon
location-marina
Renders the location-park icon
location-park
Renders the location-restroom icon
location-restroom
Renders the location-shopping icon
location-shopping
Renders the location icon
location
Renders the lock-closed icon
lock-closed
Renders the lock-open icon
lock-open
Renders the map icon
map
Renders the mic icon
mic
Renders the minus-outline icon
minus-outline
Renders the minus-solid icon
minus-solid
Renders the mobile-devices icon
mobile-devices
Renders the mood-happy-outline icon
mood-happy-outline
Renders the mood-happy-solid icon
mood-happy-solid
Renders the mood-neutral-outline icon
mood-neutral-outline
Renders the mood-neutral-solid icon
mood-neutral-solid
Renders the mood-sad-outline icon
mood-sad-outline
Renders the mood-sad-solid icon
mood-sad-solid
Renders the mouse icon
mouse
Renders the music-album icon
music-album
Renders the music-artist icon
music-artist
Renders the music-notes icon
music-notes
Renders the music-playlist icon
music-playlist
Renders the network icon
network
Renders the news-paper icon
news-paper
Renders the notification icon
notification
Renders the notifications-outline icon
notifications-outline
Renders the notifications icon
notifications
Renders the paste icon
paste
Renders the pause-outline icon
pause-outline
Renders the pause-solid icon
pause-solid
Renders the pause icon
pause
Renders the pen-tool icon
pen-tool
Renders the phone icon
phone
Renders the photo icon
photo
Renders the php-elephant icon
php-elephant
Renders the pin icon
pin
Renders the play-outline icon
play-outline
Renders the play icon
play
Renders the playlist icon
playlist
Renders the plugin icon
plugin
Renders the portfolio icon
portfolio
Renders the printer icon
printer
Renders the pylon icon
pylon
Renders the question icon
question
Renders the queue icon
queue
Renders the radar copy 2 icon
radar copy 2
Renders the radar icon
radar
Renders the radio icon
radio
Renders the refresh icon
refresh
Renders the reload icon
reload
Renders the reply-all icon
reply-all
Renders the reply icon
reply
Renders the repost icon
repost
Renders the save-disk icon
save-disk
Renders the screen-full icon
screen-full
Renders the search icon
search
Renders the send icon
send
Renders the servers icon
servers
Renders the shield icon
shield
Renders the shopping-cart icon
shopping-cart
Renders the show-sidebar icon
show-sidebar
Renders the shuffle icon
shuffle
Renders the stand-by icon
stand-by
Renders the star-full icon
star-full
Renders the station icon
station
Renders the step-backward icon
step-backward
Renders the step-forward icon
step-forward
Renders the stethoscope icon
stethoscope
Renders the store-front icon
store-front
Renders the stroke-width icon
stroke-width
Renders the subdirectory-left icon
subdirectory-left
Renders the subdirectory-right icon
subdirectory-right
Renders the swap icon
swap
Renders the tablet icon
tablet
Renders the tag icon
tag
Renders the target icon
target
Renders the text-box icon
text-box
Renders the text-decoration icon
text-decoration
Renders the thermometer icon
thermometer
Renders the thumbs-down icon
thumbs-down
Renders the thumbs-up icon
thumbs-up
Renders the ticket icon
ticket
Renders the time icon
time
Renders the timer icon
timer
Renders the tools copy icon
tools copy
Renders the translate icon
translate
Renders the trash icon
trash
Renders the travel-bus icon
travel-bus
Renders the travel-car icon
travel-car
Renders the travel-case icon
travel-case
Renders the travel-taxi-cab icon
travel-taxi-cab
Renders the travel-train icon
travel-train
Renders the travel-walk icon
travel-walk
Renders the travel icon
travel
Renders the trophy icon
trophy
Renders the tuning icon
tuning
Renders the upload icon
upload
Renders the usb icon
usb
Renders the user-add icon
user-add
Renders the user-group icon
user-group
Renders the user-solid-circle icon
user-solid-circle
Renders the user-solid-square icon
user-solid-square
Renders the user icon
user
Renders the vector icon
vector
Renders the video-camera icon
video-camera
Renders the view-carousel icon
view-carousel
Renders the view-column icon
view-column
Renders the view-hide icon
view-hide
Renders the view-list icon
view-list
Renders the view-show icon
view-show
Renders the view-tile icon
view-tile
Renders the volume-down icon
volume-down
Renders the volume-mute icon
volume-mute
Renders the volume-off icon
volume-off
Renders the volume-up icon
volume-up
Renders the wallet icon
wallet
Renders the watch icon
watch
Renders the window-new icon
window-new
Renders the window-open icon
window-open
Renders the window icon
window
Renders the wrench icon
wrench
Renders the yin-yang icon
yin-yang
Renders the zoom-in icon
zoom-in
Renders the zoom-out icon
zoom-out
Renders the
add-outlineiconadd-outline