Natura11y Has Its Own Icon Library
Natura11y icons are free for both personal and commercial use. No email address or sign-up required.
Using the Icons104 icons available.
No results found for ''
Accessibility
HTML
<!-- Icon Examples --><span class="icon icon-accessibility"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-accessibility" aria-hidden="true"></span></a>Tags:accessibilitydisabilityperson
Arrow Down
HTML
<!-- Icon Examples --><span class="icon icon-arrow-down"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-arrow-down" aria-hidden="true"></span></a>Tags:arrowdirectiondown
Arrow Left
HTML
<!-- Icon Examples --><span class="icon icon-arrow-left"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-arrow-left" aria-hidden="true"></span></a>Tags:arrowdirectionleft
Arrow Right
HTML
<!-- Icon Examples --><span class="icon icon-arrow-right"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-arrow-right" aria-hidden="true"></span></a>Tags:arrowdirectionleft
Arrow Up
HTML
<!-- Icon Examples --><span class="icon icon-arrow-up"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-arrow-up" aria-hidden="true"></span></a>Tags:arrowdirectionup
Asterisk
HTML
<!-- Icon Examples --><span class="icon icon-asterisk"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-asterisk" aria-hidden="true"></span></a>Tags:required
Bell
HTML
<!-- Icon Examples --><span class="icon icon-bell"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-bell" aria-hidden="true"></span></a>Tags:alertnotificationnotify
Bluesky
HTML
<!-- Icon Examples --><span class="icon icon-bluesky"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-bluesky" aria-hidden="true"></span></a>Tags:brandlogosocial
Bookmark
HTML
<!-- Icon Examples --><span class="icon icon-bookmark"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-bookmark" aria-hidden="true"></span></a>Tags:addsave
Bookmark Add
HTML
<!-- Icon Examples --><span class="icon icon-bookmark-add"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-bookmark-add" aria-hidden="true"></span></a>Tags:addsave
Bookmark Remove
HTML
<!-- Icon Examples --><span class="icon icon-bookmark-remove"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-bookmark-remove" aria-hidden="true"></span></a>Tags:removesave
Calendar
HTML
<!-- Icon Examples --><span class="icon icon-calendar"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-calendar" aria-hidden="true"></span></a>Tags:datemeeting
Call
HTML
<!-- Icon Examples --><span class="icon icon-call"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-call" aria-hidden="true"></span></a>Tags:contacthandsetphonetelephone
Car
HTML
<!-- Icon Examples --><span class="icon icon-car"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-car" aria-hidden="true"></span></a>Tags:drivetravel
Caret Down
HTML
<!-- Icon Examples --><span class="icon icon-caret-down"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-caret-down" aria-hidden="true"></span></a>Tags:arrowdown
Caret Left
HTML
<!-- Icon Examples --><span class="icon icon-caret-left"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-caret-left" aria-hidden="true"></span></a>Tags:arrowleft
Caret Right
HTML
<!-- Icon Examples --><span class="icon icon-caret-right"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-caret-right" aria-hidden="true"></span></a>Tags:arrowright
Caret Up
HTML
<!-- Icon Examples --><span class="icon icon-caret-up"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-caret-up" aria-hidden="true"></span></a>Tags:arrowup
Checkbox Checked
HTML
<!-- Icon Examples --><span class="icon icon-checkbox-checked"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-checkbox-checked" aria-hidden="true"></span></a>Tags:confirmyes
Checkbox Unchecked
HTML
<!-- Icon Examples --><span class="icon icon-checkbox-unchecked"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-checkbox-unchecked" aria-hidden="true"></span></a>Tags:no
Chevron Down
HTML
<!-- Icon Examples --><span class="icon icon-chevron-down"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-chevron-down" aria-hidden="true"></span></a>Tags:arrowdown
Chevron Left
HTML
<!-- Icon Examples --><span class="icon icon-chevron-left"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-chevron-left" aria-hidden="true"></span></a>Tags:arrowleft
Chevron Right
HTML
<!-- Icon Examples --><span class="icon icon-chevron-right"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-chevron-right" aria-hidden="true"></span></a>Tags:arrowright
Chevron Up
HTML
<!-- Icon Examples --><span class="icon icon-chevron-up"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-chevron-up" aria-hidden="true"></span></a>Tags:arrowup
Clear
HTML
<!-- Icon Examples --><span class="icon icon-clear"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-clear" aria-hidden="true"></span></a>Tags:closeexittimes
Close
HTML
<!-- Icon Examples --><span class="icon icon-close"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-close" aria-hidden="true"></span></a>Tags:exittimes
Confirm
HTML
<!-- Icon Examples --><span class="icon icon-confirm"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-confirm" aria-hidden="true"></span></a>Tags:checksuccess
Delete
HTML
<!-- Icon Examples --><span class="icon icon-delete"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-delete" aria-hidden="true"></span></a>Tags:removetrash
Disabled
HTML
<!-- Icon Examples --><span class="icon icon-disabled"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-disabled" aria-hidden="true"></span></a>Tags:disallowedinactiveoff
Double Chevron Down
HTML
<!-- Icon Examples --><span class="icon icon-double-chevron-down"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-double-chevron-down" aria-hidden="true"></span></a>Tags:arrowdown
Double Chevron Left
HTML
<!-- Icon Examples --><span class="icon icon-double-chevron-left"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-double-chevron-left" aria-hidden="true"></span></a>Tags:arrowleft
Double Chevron Right
HTML
<!-- Icon Examples --><span class="icon icon-double-chevron-right"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-double-chevron-right" aria-hidden="true"></span></a>Tags:arrowright
Double Chevron Up
HTML
<!-- Icon Examples --><span class="icon icon-double-chevron-up"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-double-chevron-up" aria-hidden="true"></span></a>Tags:arrowup
Edit
HTML
<!-- Icon Examples --><span class="icon icon-edit"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-edit" aria-hidden="true"></span></a>Tags:pencil
Expand
HTML
<!-- Icon Examples --><span class="icon icon-expand"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-expand" aria-hidden="true"></span></a>Tags:enlargefullscreenopen
HTML
<!-- Icon Examples --><span class="icon icon-facebook"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-facebook" aria-hidden="true"></span></a>Tags:brandlogosocial
Figma
HTML
<!-- Icon Examples --><span class="icon icon-figma"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-figma" aria-hidden="true"></span></a>Tags:brandlogo
File Download
HTML
<!-- Icon Examples --><span class="icon icon-file-download"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-file-download" aria-hidden="true"></span></a>Tags:arrowfilesave
File Upload
HTML
<!-- Icon Examples --><span class="icon icon-file-upload"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-file-upload" aria-hidden="true"></span></a>Tags:arrowfilesend
Github
HTML
<!-- Icon Examples --><span class="icon icon-github"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-github" aria-hidden="true"></span></a>Tags:brandlogosocial
Globe
HTML
<!-- Icon Examples --><span class="icon icon-globe"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-globe" aria-hidden="true"></span></a>Tags:globelanguage
Grid
HTML
<!-- Icon Examples --><span class="icon icon-grid"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-grid" aria-hidden="true"></span></a>Tags:view
Hashtag
HTML
<!-- Icon Examples --><span class="icon icon-hashtag"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-hashtag" aria-hidden="true"></span></a>Tags:poundsocial
Heart
HTML
<!-- Icon Examples --><span class="icon icon-heart"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-heart" aria-hidden="true"></span></a>Tags:favoritelikelove
Home
HTML
<!-- Icon Examples --><span class="icon icon-home"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-home" aria-hidden="true"></span></a>Tags:house
Info
HTML
<!-- Icon Examples --><span class="icon icon-info"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-info" aria-hidden="true"></span></a>Tags:more
HTML
<!-- Icon Examples --><span class="icon icon-instagram"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-instagram" aria-hidden="true"></span></a>Tags:brandlogosocial
Language
HTML
<!-- Icon Examples --><span class="icon icon-language"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-language" aria-hidden="true"></span></a>Tags:localisationtranslate
Lightbulb
HTML
<!-- Icon Examples --><span class="icon icon-lightbulb"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-lightbulb" aria-hidden="true"></span></a>Tags:light
HTML
<!-- Icon Examples --><span class="icon icon-linkedin"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-linkedin" aria-hidden="true"></span></a>Tags:brandlogosocial
List
HTML
<!-- Icon Examples --><span class="icon icon-list"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-list" aria-hidden="true"></span></a>Tags:view
Loading
HTML
<!-- Icon Examples --><span class="icon icon-loading"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-loading" aria-hidden="true"></span></a>Tags:spinner
Location
HTML
<!-- Icon Examples --><span class="icon icon-location"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-location" aria-hidden="true"></span></a>Tags:currentmap
Lock
HTML
<!-- Icon Examples --><span class="icon icon-lock"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-lock" aria-hidden="true"></span></a>Tags:accountsign in
HTML
<!-- Icon Examples --><span class="icon icon-mail"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-mail" aria-hidden="true"></span></a>Tags:emailenvelope
Map Pin
HTML
<!-- Icon Examples --><span class="icon icon-map-pin"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-map-pin" aria-hidden="true"></span></a>Tags:location
Menu
HTML
<!-- Icon Examples --><span class="icon icon-menu"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-menu" aria-hidden="true"></span></a>Tags:barshamburger
Minus
HTML
<!-- Icon Examples --><span class="icon icon-minus"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-minus" aria-hidden="true"></span></a>Tags:subtract
Mobile
HTML
<!-- Icon Examples --><span class="icon icon-mobile"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-mobile" aria-hidden="true"></span></a>Tags:phone
Mode Light Dark
HTML
<!-- Icon Examples --><span class="icon icon-mode-light-dark"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-mode-light-dark" aria-hidden="true"></span></a>Tags:displaysettings
Moon
HTML
<!-- Icon Examples --><span class="icon icon-moon"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-moon" aria-hidden="true"></span></a>Tags:darkmode
More (Horizontal)
HTML
<!-- Icon Examples --><span class="icon icon-more-horizontal"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-more-horizontal" aria-hidden="true"></span></a>Tags:dotsmenu
More Vertical
HTML
<!-- Icon Examples --><span class="icon icon-more-vertical"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-more-vertical" aria-hidden="true"></span></a>Tags:dotsmenu
NPM
HTML
<!-- Icon Examples --><span class="icon icon-npm"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-npm" aria-hidden="true"></span></a>Tags:brandlogo
Open New
HTML
<!-- Icon Examples --><span class="icon icon-open-new"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-open-new" aria-hidden="true"></span></a>Tags:newwindow
Page
HTML
<!-- Icon Examples --><span class="icon icon-page"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-page" aria-hidden="true"></span></a>Tags:documentfilepaper
Page End
HTML
<!-- Icon Examples --><span class="icon icon-page-end"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-page-end" aria-hidden="true"></span></a>Tags:jumppagination
Page Start
HTML
<!-- Icon Examples --><span class="icon icon-page-start"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-page-start" aria-hidden="true"></span></a>Tags:jumppagination
Parking
HTML
<!-- Icon Examples --><span class="icon icon-parking"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-parking" aria-hidden="true"></span></a>Tags:streettransportation
Pause
HTML
<!-- Icon Examples --><span class="icon icon-pause"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-pause" aria-hidden="true"></span></a>Tags:audiovideo
Pause Circle
HTML
<!-- Icon Examples --><span class="icon icon-pause-circle"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-pause-circle" aria-hidden="true"></span></a>Tags:audiovideo
People
HTML
<!-- Icon Examples --><span class="icon icon-people"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-people" aria-hidden="true"></span></a>Tags:humanteam
Person
HTML
<!-- Icon Examples --><span class="icon icon-person"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-person" aria-hidden="true"></span></a>Tags:humanindividual
Plane
HTML
<!-- Icon Examples --><span class="icon icon-plane"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-plane" aria-hidden="true"></span></a>Tags:airplanetravel
Play
HTML
<!-- Icon Examples --><span class="icon icon-play"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-play" aria-hidden="true"></span></a>Tags:audiovideo
Play Circle
HTML
<!-- Icon Examples --><span class="icon icon-play-circle"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-play-circle" aria-hidden="true"></span></a>Tags:audiovideo
Plus
HTML
<!-- Icon Examples --><span class="icon icon-plus"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-plus" aria-hidden="true"></span></a>Tags:add
HTML
<!-- Icon Examples --><span class="icon icon-print"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-print" aria-hidden="true"></span></a>Tags:printer
Question Mark
HTML
<!-- Icon Examples --><span class="icon icon-question-mark"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-question-mark" aria-hidden="true"></span></a>Tags:information
Radio Checked
HTML
<!-- Icon Examples --><span class="icon icon-radio-checked"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-radio-checked" aria-hidden="true"></span></a>Tags:onselected
Radio Unchecked
HTML
<!-- Icon Examples --><span class="icon icon-radio-unchecked"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-radio-unchecked" aria-hidden="true"></span></a>Tags:offunselected
Recycle
HTML
<!-- Icon Examples --><span class="icon icon-recycle"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-recycle" aria-hidden="true"></span></a>Tags:conservereuse
Search
HTML
<!-- Icon Examples --><span class="icon icon-search"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-search" aria-hidden="true"></span></a>Tags:findmagnifying glass
Settings
HTML
<!-- Icon Examples --><span class="icon icon-settings"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-settings" aria-hidden="true"></span></a>Tags:gear
Share
HTML
<!-- Icon Examples --><span class="icon icon-share"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-share" aria-hidden="true"></span></a>Tags:arrowsend
Shopping Cart
HTML
<!-- Icon Examples --><span class="icon icon-shopping-cart"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-shopping-cart" aria-hidden="true"></span></a>Tags:buycommerce
Shrink
HTML
<!-- Icon Examples --><span class="icon icon-shrink"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-shrink" aria-hidden="true"></span></a>Tags:closereturn
Sign In
HTML
<!-- Icon Examples --><span class="icon icon-sign-in"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-sign-in" aria-hidden="true"></span></a>Tags:accountlogin
Sign Out
HTML
<!-- Icon Examples --><span class="icon icon-sign-out"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-sign-out" aria-hidden="true"></span></a>Tags:accountlogin
Star Fill
HTML
<!-- Icon Examples --><span class="icon icon-star-fill"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-star-fill" aria-hidden="true"></span></a>Tags:favorrate
Star Outline
HTML
<!-- Icon Examples --><span class="icon icon-star-outline"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-star-outline" aria-hidden="true"></span></a>Tags:favorrate
Sun
HTML
<!-- Icon Examples --><span class="icon icon-sun"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-sun" aria-hidden="true"></span></a>Tags:brightnessday
Switch Off
HTML
<!-- Icon Examples --><span class="icon icon-switch-off"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-switch-off" aria-hidden="true"></span></a>Tags:checkofftoggle
Switch On
HTML
<!-- Icon Examples --><span class="icon icon-switch-on"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-switch-on" aria-hidden="true"></span></a>Tags:checkontoggle
Tiktok
HTML
<!-- Icon Examples --><span class="icon icon-tiktok"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-tiktok" aria-hidden="true"></span></a>Tags:brandlogosocial
HTML
<!-- Icon Examples --><span class="icon icon-twitter"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-twitter" aria-hidden="true"></span></a>Tags:brandlogosocial
Twitter (X)
HTML
<!-- Icon Examples --><span class="icon icon-twitter-x"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-twitter-x" aria-hidden="true"></span></a>Tags:brandlogosocialx
Volume
HTML
<!-- Icon Examples --><span class="icon icon-volume"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-volume" aria-hidden="true"></span></a>Tags:audiosoundvideo
Volume Mute
HTML
<!-- Icon Examples --><span class="icon icon-volume-mute"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-volume-mute" aria-hidden="true"></span></a>Tags:audiosoundvideo
Warn
HTML
<!-- Icon Examples --><span class="icon icon-warn"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-warn" aria-hidden="true"></span></a>Tags:error
Wheelchair
HTML
<!-- Icon Examples --><span class="icon icon-wheelchair"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-wheelchair" aria-hidden="true"></span></a>Tags:accessibilitydisability
YouTube
HTML
<!-- Icon Examples --><span class="icon icon-youtube"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-youtube" aria-hidden="true"></span></a>Tags:brandlogosocial
Zoom In
HTML
<!-- Icon Examples --><span class="icon icon-zoom-in"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-zoom-in" aria-hidden="true"></span></a>Tags:enlargemagnify
Zoom Out
HTML
<!-- Icon Examples --><span class="icon icon-zoom-out"></span>
<a class="button button--icon-only" href="#1"> <span class="icon icon-zoom-out" aria-hidden="true"></span></a>Tags:shrink