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.

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  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


google

Source: fab


github

Source: fab


discord

Source: fab


github

Source: fab


facebook

Source: fab


patreon

Source: fab


twitter

Source: fab


instagram

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

  1. s-icon:user

    Display the user icon

  2. s-icon:heart

    Display the heart icon

  3. s-icon:api

    Display the api icon

  4. s-icon:fire

    Display the fire icon

  5. s-icon:preview

    Display the preview icon

  6. s-icon:css

    Display the css icon

  7. s-icon:calendarp

    Display the calendarp icon

  8. s-icon:arrow-down

    Display the arrow-down icon

  9. s-icon:arrow-up

    Display the arrow-up icon

  10. s-icon:arrow-left

    Display the arrow-left icon

  11. s-icon:arrow-right

    Display the arrow-right icon

  12. s-icon:documentation

    Display the documentation icon

  13. s-icon:box

    Display the box icon

  14. s-icon:more

    Display the more icon

  15. s-icon:angle-up

    Display the angle-up icon

  16. s-icon:color

    Display the color icon

  17. s-icon:eye-dropper

    Display the eye-dropper icon

  18. s-icon:info

    Display the info icon

  19. s-icon:menu

    Display the menu icon

  20. s-icon:close

    Display the close icon

  21. s-icon:cross

    Display the cross icon

  22. s-icon:npm

    Display the npm icon

  23. s-icon:example

    Display the example icon

  24. s-icon:list-ul

    Display the list-ul icon

  25. s-icon:setting

    Display the setting icon

  26. s-icon:return

    Display the return icon

  27. s-icon:link

    Display the link icon

  28. s-icon:copy

    Display the copy icon

  29. s-icon:check

    Display the check icon

  30. s-icon:copied

    Display the copied icon

  31. s-icon:search

    Display the search icon

  32. s-icon:nothing

    Display the nothing icon

  33. s-icon:import

    Display the import icon

  34. s-icon:dark-mode

    Display the dark-mode icon

  35. s-icon:star

    Display the star icon

  36. s-icon:bugs

    Display the bugs icon

  37. s-icon:write

    Display the write icon

  38. s-icon:google

    Display the google icon

  39. s-icon:github

    Display the github icon

  40. s-icon:discord

    Display the discord icon

  41. s-icon:facebook

    Display the facebook icon

  42. s-icon:patreon

    Display the patreon icon

  43. s-icon:twitter

    Display the twitter icon

  44. s-icon:instagram

    Display the instagram icon

  45. s-icon:install

    Display the install icon

  46. s-icon:settings

    Display the settings icon

  47. s-icon:vuejs

    Display the vuejs icon

  48. s-icon:tasks

    Display the tasks icon

  49. s-icon:todo

    Display the todo icon

  50. s-icon:file-pdf

    Display the file-pdf icon

  51. s-icon:file-image

    Display the file-image icon

  52. s-icon:file-code

    Display the file-code icon

  53. s-icon:file-archive

    Display the file-archive icon

  54. s-icon:file

    Display the file icon

  55. s-icon:computer

    Display the computer icon

  56. s-icon:server

    Display the server icon

  57. s-icon:support-rtl

    Display the support-rtl icon

  58. s-icon:support-edge

    Display the support-edge icon

  59. s-icon:support-chromium

    Display the support-chromium icon

  60. s-icon:support-firefox

    Display the support-firefox icon

  61. s-icon:support-safari

    Display the support-safari icon

  62. s-icon:vue

    Display the vue icon

  63. s-icon:read-direction

    Display the read-direction icon

  64. s-icon:edge

    Display the edge icon

  65. s-icon:chrome

    Display the chrome icon

  66. s-icon:firefox

    Display the firefox icon

  67. s-icon:safari

    Display the safari icon

  68. s-icon:animation-easing

    Display the animation-easing icon

  69. s-icon:css-flex

    Display the css-flex icon

  70. s-icon:css-radius

    Display the css-radius icon

  71. s-icon:file-css

    Display the file-css icon

  72. s-icon:file-html

    Display the file-html icon

  73. s-icon:file-js

    Display the file-js icon

  74. s-icon:file-md

    Display the file-md icon

  75. s-icon:file-php

    Display the file-php icon

  76. s-icon:file-ts

    Display the file-ts icon

  77. s-icon:folder-add

    Display the folder-add icon

  78. s-icon:folder-opened

    Display the folder-opened icon

  79. s-icon:folder-remove

    Display the folder-remove icon

  80. s-icon:folder

    Display the folder icon

  81. s-icon:lang-css-1

    Display the lang-css-1 icon

  82. s-icon:lang-css

    Display the lang-css icon

  83. s-icon:lang-html-1

    Display the lang-html-1 icon

  84. s-icon:lang-html

    Display the lang-html icon

  85. s-icon:lang-js-1

    Display the lang-js-1 icon

  86. s-icon:lang-js

    Display the lang-js icon

  87. s-icon:lang-md-1

    Display the lang-md-1 icon

  88. s-icon:lang-md

    Display the lang-md icon

  89. s-icon:lang-node

    Display the lang-node icon

  90. s-icon:lang-php-1

    Display the lang-php-1 icon

  91. s-icon:lang-php

    Display the lang-php icon

  92. s-icon:lang-ts-1

    Display the lang-ts-1 icon

  93. s-icon:lang-ts

    Display the lang-ts icon

  94. s-icon:layout-ratio

    Display the layout-ratio icon

  95. s-icon:layout-scale

    Display the layout-scale icon

  96. s-icon:layout-space

    Display the layout-space icon

  97. s-icon:layout

    Display the layout icon

  98. s-icon:link-broken-solid

    Display the link-broken-solid icon

  99. s-icon:link-broken

    Display the link-broken icon

  100. s-icon:logo-coffeekraken

    Display the logo-coffeekraken icon

  101. s-icon:logo-lit-solid

    Display the logo-lit-solid icon

  102. s-icon:logo-lit

    Display the logo-lit icon

  103. s-icon:logo-nextjs-solid

    Display the logo-nextjs-solid icon

  104. s-icon:logo-nextjs

    Display the logo-nextjs icon

  105. s-icon:logo-opensource

    Display the logo-opensource icon

  106. s-icon:logo-vite-solid

    Display the logo-vite-solid icon

  107. s-icon:logo-vite

    Display the logo-vite icon

  108. s-icon:logo-vscode-solid

    Display the logo-vscode-solid icon

  109. s-icon:logo-vscode

    Display the logo-vscode icon

  110. s-icon:misc-bubbles

    Display the misc-bubbles icon

  111. s-icon:misc-build-solid

    Display the misc-build-solid icon

  112. s-icon:misc-build

    Display the misc-build icon

  113. s-icon:misc-eye

    Display the misc-eye icon

  114. s-icon:misc-ring

    Display the misc-ring icon

  115. s-icon:misc-tools

    Display the misc-tools icon

  116. s-icon:theme-colors

    Display the theme-colors icon

  117. s-icon:theme

    Display the theme icon

  118. s-icon:ui-align

    Display the ui-align icon

  119. s-icon:ui-autocomplete

    Display the ui-autocomplete icon

  120. s-icon:ui-avatar

    Display the ui-avatar icon

  121. s-icon:ui-button

    Display the ui-button icon

  122. s-icon:ui-code

    Display the ui-code icon

  123. s-icon:ui-copy

    Display the ui-copy icon

  124. s-icon:ui-datepicker

    Display the ui-datepicker icon

  125. s-icon:ui-display-preview

    Display the ui-display-preview icon

  126. s-icon:ui-dropdown

    Display the ui-dropdown icon

  127. s-icon:ui-link-broken-solid

    Display the ui-link-broken-solid icon

  128. s-icon:ui-link-broken

    Display the ui-link-broken icon

  129. s-icon:ui-loader-solid

    Display the ui-loader-solid icon

  130. s-icon:ui-loader

    Display the ui-loader icon

  131. s-icon:ui-more-solid

    Display the ui-more-solid icon

  132. s-icon:ui-more

    Display the ui-more icon

  133. s-icon:ui-range

    Display the ui-range icon

  134. s-icon:ui-refresh

    Display the ui-refresh icon

  135. s-icon:ui-switch

    Display the ui-switch icon

  136. s-icon:ui-tooltip

    Display the ui-tooltip icon

  137. s-icon:ui-typography

    Display the ui-typography icon

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on