We now offer the ability to insert icons as SVG instead of as PNG images. This allows you to change the color on the fly as needed. If a color is not set, the default color will be #222222 (a very dark gray).
Using SVG on websites
Insert an SVG on the page just like you would an external image, ensure you specify the size, the default height and width is 160px x 160px. Width and Height must be set to ensure compatibility with older browsers. Your SVG image URL will be formatted as follows replacing the dakno URL with your own URL:
https://www.dakno.com/icons/base/pencil
<img src="https://www.dakno.com/icons/base/pencil" width="90" height="90" alt="Pencil">
You can aslo use it as a shortcode:
[svg collection="base" icon_name="pencil" height="80" icon_color="main"]
Let's break this apart piece by piece:
https://www.dakno.com is your domain URL, please update it based on the domain you're currently on.
icons - This is static and will never change. This must be all lowercase as it is case sensitive.
base - This is your collection name. This must be all lowercase as it is case sensitive.
pencil - This is your icon's name, see the "List of Available Icons" section for names. This must be all lowercase as it is case sensitive.
The default color of all icons right now is #222. There will be a future update to set it to the main body color. If you would like to change the color you can add it to the end of the URL:
https://www.dakno.com/icons/base/pencil/COLOR
<img src="https://www.dakno.com/icons/base/pencil/COLOR" width="90" height="90" alt="Pencil">
Replace COLOR with either a keyword or a hex value:
main - This is the site's main color.
alt - This is the site's alt color, usually dark, by default this is usually #555, but may be reset depending on the design.
accent - This is the site's alt color (usually light or opposite of the main color, this tends to be white or light gray).
text - This is the site's body font color
link - This is the site's link color
header - This is the site's heading color
000000 - This is your color's hex value. This is case insensitive and must be 3 or 6 characters long in a valid hex code. If not it will show the default color, so if the color is not changing, make sure you didn't include the # or characters other than 0-9 or a-F.
List of Available Icons
logos collection:
realtor
eho
activerain
bookmark
facebook
flickr
foursquare
googleplus
instagram
linkedin
photoblog
pinterest
rss
skype
twitter
vimeo
yelp
youtube
Material collection:
arrow-down
arrow-left
arrow-right
arrow-up
chevron-down
chevron-left
chevron-right
chevron-up
close
email-outline
email
menu
phone
base collection:
1,
1-script,
1-serif,
1-circle
2,
2-script,
2-serif,
2-circle
3,
3-script,
3-serif,
3-circle
4,
4-script,
4-serif
5 ,
5-script,
5-serif
6,
6-script,
6-serif
7,
7-script,
7-serif
8,
8-script,
8-serif
9,
9-script,
9-serif
10,
10-script,
10-serif
11
12
13
14
15
16
17
18
19
20
add
anchor
art
artist-palette
auction
backpack
balloons
baseball
basketball
beachchair
beauty
bed
bell
bike
binoculars
bluetooth
boat
bone
bookshelf
bowling
box
boxing
briefcase
bucket-shovel
building
building-3
calculator
calendar
camera
canoe
car
cards
celebration
cellphone
cellphone-2
chatbubble
chat-bubble
chat-bubble-dots
chat-bubbles
checkmark
chef
clipboard
community
compass
copy
cutting-board
darts
desktop
dishwasher
dj
document
download
email-fill
email-outline
event-tent
exercise
fax
fire
fish-hook
fishing
flashlight
flipflops
floorplan
folder
football
fork-knife
for-rent
for-sale
garage
garage-square
gas
gift
golf
graduation
grill
grilling-tools
groceries
guitar
hammer
hammer-screwdriver
headphones
health
heart
help
hiking
house
house-no-details
icecream
info
innertube
innertubes
kayak
kettlebell
key
laptop
leaf
lighthouse
list
location-pin
location-pin-with-path
lotsize
magic
magnifying-glass
mail
map
map-details
marker
martini
meal
meditation
mobile
mountains
movie
moving-truck
music-note
no
notepad
old-building
paddles
palm-tree
paperclip
pawprint
pencil
person
phone
phone-bg
phone-calling
phone-fill
phone-outline
picnic
pill
pingpong
plane
play (pending)
pocketknife
police
pool-ball
popcorn
popsicle
presale
remove
roller-suitcase
rss
running
sailboat
scheme
search
search-add
seashell
shoe
shopping-bag
shopping-cart
shower
siteplan
snorkel
soccer
star
stethoscope
storefront
suitcase
sunglasses
sunrise
surfboards
swimming
tag
tags
taxi
teacup
tennis
tent
termometer
texting
theatre
tie
tooth
train
trash
tree
trees
triangular-ruler
umbrella
user-female
user-male
users
volleyball
waves
weight
wifi
wine-glass
wrench
yacht
zoom-in
zoom-out
lynny collection:
arrow-circle-down
arrow-circle-up
arrow-circle-left
arrow-circle-right
arrow-down
arrow-up
arrow-left
arrow-right
arrow-outline-curved-down
arrow-outline-curved-up
arrow-outline-curved-left
arrow-outline-curved-right
arrow-outline-down
arrow-outline-up
arrow-outline-left
arrow-outline-right
bell
billboard
binoculars
bone
bookmark
bottle
bowtie
broadcast
browser
calculator
calendar
camera
cash-register
chart
chart-2
chart-flow
chart-pie
chat-bubble-dots
chat-bubbles
chatbubble
checkmark
checkmark_circle
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-outline-down
chevron-outline-left
chevron-outline-right
chevron-outline-up
chevron-right
chevron-square-down
chevron-square-left
chevron-square-right
chevron-square-up
chevron-up
clipboard
clock
close
cloud
code
coffee
compass
compress
credit-card
desk
desktop
diamond
document
dollar
dollar-sign
download
email-outline
emails-outline
envelope
envelopes
exclamation-point-circle
expand
eye
filing
flag
folder
folders
funnel
gear
gear-complex
globe
graduation
graph_bar
hammer
headphones
heart
house
info
infosign
internet
key
key_on_ring
keyboard
laptop
lightning-bolt
list
location-pin
location-pin-with-path
lock-closed
lock-open
magnifying-glass
map
map-details
megaphone
microphone
microphone-2
minus
monument
moon
mouse
music-note
music-note-2
newcon
newspaper
nightstand
no
notepad
paperclip
pencil
pencil-on-paper
people-2
people-3
person-female
person-male
phone
phone-calling
phone-mobile
picture
pin
play-button
plus
popsicle
power-button
present
printer
purse
question-mark-circle
raindrop
receipt
refresh
refresh-2
rocket
rss
safe
science
scissors
sent
shopping-bag
shopping-cart
shredder
sign-street
sound
sound-increase
star
stars
storefront
suitcase
sun
tablet
tag
tags
target
thermometer
tie
trash
tree
umbrella
upload
video-recorder
wallet
warning
wind
wineglass
world
wrench
zoom-in
zoom-out
fa-regular collection
arrow-alt-circle-down
arrow-alt-circle-left
arrow-alt-circle-right
arrow-alt-circle-up
building
calendar-alt
comment
comment-alt
comments
compass
envelope
envelope-open
heart
lightbulb
map
paper-plane
question-circle
star
star-half
fa-solid collection
address-book
angle-down
angle-left
angle-right
angle-up
arrow-alt-circle-down
arrow-alt-circle-left
arrow-alt-circle-right
arrow-alt-circle-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows-alt
award
baseball-ball
basketball-ball
bath
bed
bicycle
binoculars
bone
bowling-ball
box
box-open
building
bus
bus-alt
calculator
calendar-alt
camera
camera-retro
car
car-side
chart-line
chart-pie
check
check-circle
check-square
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
city
close (pending)
coffee
coins
comment
comment-alt
comments
cube
cubes
directions
door-closed
door-open
edit
envelope
envelope-open
envelope-open-text
envelope-square
exclamation-circle
expand
expand-arrows-alt
fax
film
fish
flask
football-ball
futbol
gift
globe-americas
golf-ball
heart
heartbeat
home
hospital
info
info-circle
key
lightbulb
link
lock
lock-open
map
map-marked
map-marked-alt
map-marker
map-marker-alt
map-pin
map-signs
mobile
mobile-alt
paint-roller
pencil-ruler
people-carry
phone
phone-volume
piggy-bank
question
question-circle
quote-left
quote-right
route
ruler-combined
school
search
search-dollar
search-location
search-minus
search-plus
shipping-fast
shopping-bag
shopping-basket
shopping-cart
shower
sign
star
star-half
star-half-alt
subway
suitcase
swimmer
swimming-pool
tag
tags
taxi
thumbtack
truck
truck-loading
truck-moving
user-graduate
utensils
vector-square
video
wheelchair
wrench