Icon
add location
aim
alarm clock
apple
archive
arrow down
arrow left
arrow right
arrow up
audio
avatar
back
baseball
basketball
bell
bell filled
bicycle
bottom
bottom left
bottom right
bowl
box
briefcase
brush
brush filled
burger
calendar
camera
camera filled
caret bottom
caret left
caret right
caret top
cellphone
chat dot round
chat dot square
chat line round
chat line square
chat round
chat square
check
checked
cherry
chevron double down
chevron double left
chevron double right
chevron double up
chevron down
chevron left
chevron right
chevron up
chicken
chrome filled
circle check
circle check filled
circle close
circle close filled
circle plus
circle plus filled
clipboard
clipboard check
clock
close
close bold
cloudy
code
coffee
coffee cup
coin
cold drink
collection
collection tag
comment
compass
connection
coordinate
copy
copy document
cpu
credit card
crop
cross
database
delete
delete filled
dessert
discount
doc
document
document add
document checked
document copy
document delete
document remove
download
drag handle
edit
edit pen
enlarge
error
exit
exit square
expand
external link
eye
eye blocked
failed
files
film
filter
filter off
fingerprint
finished
flag
fold
folder
folder add
folder checked
folder delete
folder opened
folder remove
food
fork spoon
forward
forward filled
full screen
goblet
goblet full
gold medal
goods
goods filled
google
grape
grid
guide
hand
handbag
headset
histogram
hot water
house
ice cream round
ice drink
ice tea
image
inbox
info
info filled
key
knife fork
lightning
link
list
list simple
loader
loader dots
location
location filled
location information
lock
logo
lollipop
magic stick
magnet
mail
male
management
map location
medal
memo
menu
message
message box
mic
microphone
minus
minus thin
money
monitor
moon
more
more filled
mostly cloudy
mouse
mug
mute
mute notification
mute speaker
no smoking
notebook
notification
odometer
office building
open
operation
opportunity
orange
pagination
paperclip
partly cloudy
pause
pear
phone
phone filled
picture
pie chart
pin
place
platform
play
plus
plus thin
pointer
position
post card
pouring
present
price tag
printer
promotion
quartz watch
question filled
rank
reading
reading lamp
record
redo
refresh
refresh left
refresh right
refrigerator
remove
remove filled
reply
reply filled
right
rotate left
rotate right
save
scale to original
school
scissor
search
select
sell
semi select
send
send filled
server
service
setting
share
shield
shield check
ship
shop
shopping bag
shopping cart
shopping cart full
shrink
sliders
smile
smoking
soccer
sold out
sort
sort down
sort up
speaker
stamp
star
star filled
stop
stopwatch
success
success filled
sugar
suitcase line
sunny
sunrise
sunset
switch
switch button
switch filled
takeaway box
ticket
tickets
time
timer
toilet paper
tools
top
top left
top right
trend charts
triangle down
trophy
trophy base
turn off
umbrella
undo
unlock
upload
upload filled
user
user filled
users
van
video
video camera
video camera off
video pause
video play
view
wallet
wallet filled
warn triangle filled
warning
watch
wind power
zoom in
zoom out
Size
Icon size. Defines both the height and width.
<script setup lang="ts">
import { NmorphIcon, NmorphIconEye } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="icon-size-overview">
<NmorphIcon size="large">
<NmorphIconEye />
</NmorphIcon>
<NmorphIcon size="medium">
<NmorphIconEye />
</NmorphIcon>
<NmorphIcon size="small">
<NmorphIconEye />
</NmorphIcon>
</div>
</template>Width/Height
Define the width and height of the icon.
<script setup lang="ts">
import { NmorphIcon, NmorphIconLoaderDots } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="icon-width-height-overview">
<NmorphIcon width="33px" height="33px">
<NmorphIconLoaderDots />
</NmorphIcon>
<NmorphIcon width="23px" height="23px">
<NmorphIconLoaderDots />
</NmorphIcon>
<NmorphIcon width="12px" height="12px">
<NmorphIconLoaderDots />
</NmorphIcon>
</div>
</template>Color
Icon color. You can use custom colors or pass an available variable.
<script setup lang="ts">
import {
NmorphIcon,
NmorphIconAddLocation,
NmorphIconAvatar,
NmorphIconArchive,
} from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="icon-color-overview">
<NmorphIcon color="var(--nmorph-accent-color)" size="large">
<NmorphIconAddLocation />
</NmorphIcon>
<NmorphIcon color="#694295" size="large">
<NmorphIconAvatar />
</NmorphIcon>
<NmorphIcon color="hsl(148, 60%, 39%)" size="large">
<NmorphIconArchive />
</NmorphIcon>
</div>
</template>