Icons
These classes represent all the icons that you have listed in your project using the @sugar.icon.classes mixin. By using this mixin, your icons will be accessible using the same s-icon:{name} classes independently of the icon source that can be *Fontawesome or your Filesystem**. These providers are the one that we support for now but others can be added if needed.
Preview
Used icons in this website
user
Source: fa
heart
Source: fa
api
Source: fa
fire
Source: fa
preview
Source: fa
css
Source: fab
calendarp
Source: fa
arrow-down
Source: fa
arrow-up
Source: fa
arrow-left
Source: fa
arrow-right
Source: fa
documentation
Source: fa
box
Source: fa
more
Source: fa
angle-up
Source: fa
color
Source: fa
eye-dropper
Source: fa
info
Source: fa
menu
Source: fa
close
Source: fa
cross
Source: fa
npm
Source: fab
example
Source: fa
list-ul
Source: fa
setting
Source: fa
return
Source: fa
link
Source: fa
copy
Source: fa
check
Source: fa
copied
Source: fa
search
Source: fa
nothing
Source: fa
import
Source: fa
dark-mode
Source: fa
star
Source: fa
bugs
Source: fa
write
Source: fa
Source: fab
github
Source: fab
discord
Source: fab
github
Source: fab
Source: fab
patreon
Source: fab
Source: fab
Source: fab
install
Source: fa
settings
Source: fa
vuejs
Source: fab
tasks
Source: fa
todo
Source: fa
file-pdf
Source: fa
file-image
Source: fa
file-code
Source: fa
file-archive
Source: fa
file
Source: fa
computer
Source: fa
server
Source: fa
support-rtl
Source: fs
support-edge
Source: fs
support-edge
Source: fs
support-chromium
Source: fs
support-chromium
Source: fs
support-chromium
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
read-direction
Source: fs
edge
Source: fs
chrome
Source: fs
firefox
Source: fs
safari
Source: fs
vuejs
Source: fs
animation-easing
Source: fs
css-flex
Source: fs
css-radius
Source: fs
file-css
Source: fs
file-html
Source: fs
file-js
Source: fs
file-md
Source: fs
file-php
Source: fs
file-ts
Source: fs
folder-add
Source: fs
folder-opened
Source: fs
folder-remove
Source: fs
folder
Source: fs
lang-css-1
Source: fs
lang-css
Source: fs
lang-html-1
Source: fs
lang-html
Source: fs
lang-js-1
Source: fs
lang-js
Source: fs
lang-md-1
Source: fs
lang-md
Source: fs
lang-node
Source: fs
lang-php-1
Source: fs
lang-php
Source: fs
lang-ts-1
Source: fs
lang-ts
Source: fs
layout-ratio
Source: fs
layout-scale
Source: fs
layout-space
Source: fs
layout
Source: fs
link-broken-solid
Source: fs
link-broken
Source: fs
logo-coffeekraken
Source: fs
logo-lit-solid
Source: fs
logo-lit
Source: fs
logo-nextjs-solid
Source: fs
logo-nextjs
Source: fs
logo-opensource
Source: fs
logo-vite-solid
Source: fs
logo-vite
Source: fs
logo-vscode-solid
Source: fs
logo-vscode
Source: fs
misc-bubbles
Source: fs
misc-build-solid
Source: fs
misc-build
Source: fs
misc-eye
Source: fs
misc-ring
Source: fs
misc-tools
Source: fs
theme-colors
Source: fs
theme
Source: fs
ui-align
Source: fs
ui-autocomplete
Source: fs
ui-avatar
Source: fs
ui-button
Source: fs
ui-code
Source: fs
ui-copy
Source: fs
ui-datepicker
Source: fs
ui-display-preview
Source: fs
ui-dropdown
Source: fs
ui-link-broken-solid
Source: fs
ui-link-broken
Source: fs
ui-loader-solid
Source: fs
ui-loader
Source: fs
ui-more-solid
Source: fs
ui-more
Source: fs
ui-range
Source: fs
ui-refresh
Source: fs
ui-switch
Source: fs
ui-tooltip
Source: fs
ui-typography
Source: fs
user
Source: fa
heart
Source: fa
api
Source: fa
fire
Source: fa
preview
Source: fa
css
Source: fab
calendarp
Source: fa
arrow-down
Source: fa
arrow-up
Source: fa
arrow-left
Source: fa
arrow-right
Source: fa
documentation
Source: fa
box
Source: fa
more
Source: fa
angle-up
Source: fa
color
Source: fa
eye-dropper
Source: fa
info
Source: fa
menu
Source: fa
close
Source: fa
cross
Source: fa
npm
Source: fab
example
Source: fa
list-ul
Source: fa
setting
Source: fa
return
Source: fa
link
Source: fa
copy
Source: fa
check
Source: fa
copied
Source: fa
search
Source: fa
nothing
Source: fa
import
Source: fa
dark-mode
Source: fa
star
Source: fa
bugs
Source: fa
write
Source: fa
Source: fab
github
Source: fab
discord
Source: fab
github
Source: fab
Source: fab
patreon
Source: fab
Source: fab
Source: fab
install
Source: fa
settings
Source: fa
vuejs
Source: fab
tasks
Source: fa
todo
Source: fa
file-pdf
Source: fa
file-image
Source: fa
file-code
Source: fa
file-archive
Source: fa
file
Source: fa
computer
Source: fa
server
Source: fa
support-rtl
Source: fs
support-edge
Source: fs
support-edge
Source: fs
support-chromium
Source: fs
support-chromium
Source: fs
support-chromium
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-firefox
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
support-safari
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
vue
Source: fs
read-direction
Source: fs
edge
Source: fs
chrome
Source: fs
firefox
Source: fs
safari
Source: fs
vuejs
Source: fs
animation-easing
Source: fs
css-flex
Source: fs
css-radius
Source: fs
file-css
Source: fs
file-html
Source: fs
file-js
Source: fs
file-md
Source: fs
file-php
Source: fs
file-ts
Source: fs
folder-add
Source: fs
folder-opened
Source: fs
folder-remove
Source: fs
folder
Source: fs
lang-css-1
Source: fs
lang-css
Source: fs
lang-html-1
Source: fs
lang-html
Source: fs
lang-js-1
Source: fs
lang-js
Source: fs
lang-md-1
Source: fs
lang-md
Source: fs
lang-node
Source: fs
lang-php-1
Source: fs
lang-php
Source: fs
lang-ts-1
Source: fs
lang-ts
Source: fs
layout-ratio
Source: fs
layout-scale
Source: fs
layout-space
Source: fs
layout
Source: fs
link-broken-solid
Source: fs
link-broken
Source: fs
logo-coffeekraken
Source: fs
logo-lit-solid
Source: fs
logo-lit
Source: fs
logo-nextjs-solid
Source: fs
logo-nextjs
Source: fs
logo-opensource
Source: fs
logo-vite-solid
Source: fs
logo-vite
Source: fs
logo-vscode-solid
Source: fs
logo-vscode
Source: fs
misc-bubbles
Source: fs
misc-build-solid
Source: fs
misc-build
Source: fs
misc-eye
Source: fs
misc-ring
Source: fs
misc-tools
Source: fs
theme-colors
Source: fs
theme
Source: fs
ui-align
Source: fs
ui-autocomplete
Source: fs
ui-avatar
Source: fs
ui-button
Source: fs
ui-code
Source: fs
ui-copy
Source: fs
ui-datepicker
Source: fs
ui-display-preview
Source: fs
ui-dropdown
Source: fs
ui-link-broken-solid
Source: fs
ui-link-broken
Source: fs
ui-loader-solid
Source: fs
ui-loader
Source: fs
ui-more-solid
Source: fs
ui-more
Source: fs
ui-range
Source: fs
ui-refresh
Source: fs
ui-switch
Source: fs
ui-tooltip
Source: fs
ui-typography
Source: fs
Loading code example. Please wait...
Features
-
Allows you to use multiples sources and keep the same usage classes
-
Support for Fontawesome provider out of the box
-
Support for local filesystem icons
CSS Classes
-
s-icon:user
Display the user icon
-
s-icon:heart
Display the heart icon
-
s-icon:api
Display the api icon
-
s-icon:fire
Display the fire icon
-
s-icon:preview
Display the preview icon
-
s-icon:css
Display the css icon
-
s-icon:calendarp
Display the calendarp icon
-
s-icon:arrow-down
Display the arrow-down icon
-
s-icon:arrow-up
Display the arrow-up icon
-
s-icon:arrow-left
Display the arrow-left icon
-
s-icon:arrow-right
Display the arrow-right icon
-
s-icon:documentation
Display the documentation icon
-
s-icon:box
Display the box icon
-
s-icon:more
Display the more icon
-
s-icon:angle-up
Display the angle-up icon
-
s-icon:color
Display the color icon
-
s-icon:eye-dropper
Display the eye-dropper icon
-
s-icon:info
Display the info icon
-
s-icon:menu
Display the menu icon
-
s-icon:close
Display the close icon
-
s-icon:cross
Display the cross icon
-
s-icon:npm
Display the npm icon
-
s-icon:example
Display the example icon
-
s-icon:list-ul
Display the list-ul icon
-
s-icon:setting
Display the setting icon
-
s-icon:return
Display the return icon
-
s-icon:link
Display the link icon
-
s-icon:copy
Display the copy icon
-
s-icon:check
Display the check icon
-
s-icon:copied
Display the copied icon
-
s-icon:search
Display the search icon
-
s-icon:nothing
Display the nothing icon
-
s-icon:import
Display the import icon
-
s-icon:dark-mode
Display the dark-mode icon
-
s-icon:star
Display the star icon
-
s-icon:bugs
Display the bugs icon
-
s-icon:write
Display the write icon
-
s-icon:google
Display the google icon
-
s-icon:github
Display the github icon
-
s-icon:discord
Display the discord icon
-
s-icon:facebook
Display the facebook icon
-
s-icon:patreon
Display the patreon icon
-
s-icon:twitter
Display the twitter icon
-
s-icon:instagram
Display the instagram icon
-
s-icon:install
Display the install icon
-
s-icon:settings
Display the settings icon
-
s-icon:vuejs
Display the vuejs icon
-
s-icon:tasks
Display the tasks icon
-
s-icon:todo
Display the todo icon
-
s-icon:file-pdf
Display the file-pdf icon
-
s-icon:file-image
Display the file-image icon
-
s-icon:file-code
Display the file-code icon
-
s-icon:file-archive
Display the file-archive icon
-
s-icon:file
Display the file icon
-
s-icon:computer
Display the computer icon
-
s-icon:server
Display the server icon
-
s-icon:support-rtl
Display the support-rtl icon
-
s-icon:support-edge
Display the support-edge icon
-
s-icon:support-chromium
Display the support-chromium icon
-
s-icon:support-firefox
Display the support-firefox icon
-
s-icon:support-safari
Display the support-safari icon
-
s-icon:vue
Display the vue icon
-
s-icon:read-direction
Display the read-direction icon
-
s-icon:edge
Display the edge icon
-
s-icon:chrome
Display the chrome icon
-
s-icon:firefox
Display the firefox icon
-
s-icon:safari
Display the safari icon
-
s-icon:animation-easing
Display the animation-easing icon
-
s-icon:css-flex
Display the css-flex icon
-
s-icon:css-radius
Display the css-radius icon
-
s-icon:file-css
Display the file-css icon
-
s-icon:file-html
Display the file-html icon
-
s-icon:file-js
Display the file-js icon
-
s-icon:file-md
Display the file-md icon
-
s-icon:file-php
Display the file-php icon
-
s-icon:file-ts
Display the file-ts icon
-
s-icon:folder-add
Display the folder-add icon
-
s-icon:folder-opened
Display the folder-opened icon
-
s-icon:folder-remove
Display the folder-remove icon
-
s-icon:folder
Display the folder icon
-
s-icon:lang-css-1
Display the lang-css-1 icon
-
s-icon:lang-css
Display the lang-css icon
-
s-icon:lang-html-1
Display the lang-html-1 icon
-
s-icon:lang-html
Display the lang-html icon
-
s-icon:lang-js-1
Display the lang-js-1 icon
-
s-icon:lang-js
Display the lang-js icon
-
s-icon:lang-md-1
Display the lang-md-1 icon
-
s-icon:lang-md
Display the lang-md icon
-
s-icon:lang-node
Display the lang-node icon
-
s-icon:lang-php-1
Display the lang-php-1 icon
-
s-icon:lang-php
Display the lang-php icon
-
s-icon:lang-ts-1
Display the lang-ts-1 icon
-
s-icon:lang-ts
Display the lang-ts icon
-
s-icon:layout-ratio
Display the layout-ratio icon
-
s-icon:layout-scale
Display the layout-scale icon
-
s-icon:layout-space
Display the layout-space icon
-
s-icon:layout
Display the layout icon
-
s-icon:link-broken-solid
Display the link-broken-solid icon
-
s-icon:link-broken
Display the link-broken icon
-
s-icon:logo-coffeekraken
Display the logo-coffeekraken icon
-
s-icon:logo-lit-solid
Display the logo-lit-solid icon
-
s-icon:logo-lit
Display the logo-lit icon
-
s-icon:logo-nextjs-solid
Display the logo-nextjs-solid icon
-
s-icon:logo-nextjs
Display the logo-nextjs icon
-
s-icon:logo-opensource
Display the logo-opensource icon
-
s-icon:logo-vite-solid
Display the logo-vite-solid icon
-
s-icon:logo-vite
Display the logo-vite icon
-
s-icon:logo-vscode-solid
Display the logo-vscode-solid icon
-
s-icon:logo-vscode
Display the logo-vscode icon
-
s-icon:misc-bubbles
Display the misc-bubbles icon
-
s-icon:misc-build-solid
Display the misc-build-solid icon
-
s-icon:misc-build
Display the misc-build icon
-
s-icon:misc-eye
Display the misc-eye icon
-
s-icon:misc-ring
Display the misc-ring icon
-
s-icon:misc-tools
Display the misc-tools icon
-
s-icon:theme-colors
Display the theme-colors icon
-
s-icon:theme
Display the theme icon
-
s-icon:ui-align
Display the ui-align icon
-
s-icon:ui-autocomplete
Display the ui-autocomplete icon
-
s-icon:ui-avatar
Display the ui-avatar icon
-
s-icon:ui-button
Display the ui-button icon
-
s-icon:ui-code
Display the ui-code icon
-
s-icon:ui-copy
Display the ui-copy icon
-
s-icon:ui-datepicker
Display the ui-datepicker icon
-
s-icon:ui-display-preview
Display the ui-display-preview icon
-
s-icon:ui-dropdown
Display the ui-dropdown icon
-
s-icon:ui-link-broken-solid
Display the ui-link-broken-solid icon
-
s-icon:ui-link-broken
Display the ui-link-broken icon
-
s-icon:ui-loader-solid
Display the ui-loader-solid icon
-
s-icon:ui-loader
Display the ui-loader icon
-
s-icon:ui-more-solid
Display the ui-more-solid icon
-
s-icon:ui-more
Display the ui-more icon
-
s-icon:ui-range
Display the ui-range icon
-
s-icon:ui-refresh
Display the ui-refresh icon
-
s-icon:ui-switch
Display the ui-switch icon
-
s-icon:ui-tooltip
Display the ui-tooltip icon
-
s-icon:ui-typography
Display the ui-typography icon