Switch to the dark mode that's kinder on your eyes at night time.

Switch to the light mode that's kinder on your eyes at day time.

Switch to the dark mode that's kinder on your eyes at night time.

Switch to the light mode that's kinder on your eyes at day time.

tabler / tabler-icons, Hacker News

1.6k Views

A set of over 728 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a (x) grid and a 2px stroke.

  npm install tabler-icons --save

All icons are built with SVG, so you can place them as , background-image and inline in HTML code.

  img  (src)= path / to / icon.svg  "  alt =  icon title   /> 
       
 You can paste the content of the icon file into your HTML code to display it on the page. 

  (href)=   >    svg   xmlns   http://www.w3.org/ 2019 / svg         class = icon tabler-icon tabler -icon-disabled  “       width = 0  ()       stroke-width = ()  (1)     stroke  (= currentColor  ”  (fill)= " none         stroke-linecap =  (round)    >       ...     svg >   Click me   a > 
 
 Thanks to that, you can change the size, color and the  stroke-width  of the icons with CSS code. 

  icon-tabler  {     color  :  red ;     width  : 14  px  ;     height  : 14  px  ;     stroke-width 

 ():   

 
 Add an icon to be displayed on your page with the following markup ( activity  in the above example can be replaced with any valid icon name): 

  svg  (width)=  height = ()      use   xlink: href  (=   path / to / tabler-sprite.svg # tabler-activity  " 
/>   svg > 
 

     Multiple strokes

All icons in this repository have been created with the value of the stroke-width property, so if you change the value, you can get different icon variants that will fit in well with your design.