tabler/tabler-icons

A set of over 5400 free MIT-licensed high-quality SVG icons for you to use in your web projects.

A premium and open source dashboard template with a responsive and high-quality UI.

🔎 Preview

Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! Show me a demo

🚀 Features

We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some Liquid) knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!

• Responsive: With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
• Cross Browser: Our theme works perfectly with the latest Chrome, Firefox+, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
• HTML5 & CSS3: We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
• Clean Code: We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
• Demo pages: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
• Single Page Application versions: Tabler React has React components for Tabler.

📖 Documentation

Documentation is available as a part of Tabler preview: https://tabler.io/docs/

To run the documentation site locally, follow instructions in the Documentation README.

🪴 Project Activity

💕 Sponsor Tabler

Sponsors

Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. Become a sponsor!

📦 Setup environment

To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:

1. Install Node.js, which we use to manage our dependencies.
2. Navigate to the root /tabler directory and run pnpm install to install our local dependencies listed in package.json.
3. Install Ruby - the recommended version is 2.7.6.
4. Install Bundler with gem install bundler and finally run bundle install. It will install all Ruby dependencies, such as Jekyll and plugins.

OSX users:

1. NPM pnpm install
2. install Ruby (2.5.* recommended) brew install ruby @2.5
3. install bundler gem install bundler
4. install bundle install

• if bundler get any errors try

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install

5. Run NPM npm run start

Windows users:

1. Install Git in C:\Program Files\git\bin directory and run npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe" to change the default shell.
2. Install Ruby+Devkit - the recommended version is 2.7.6.
3. Read guide to get Jekyll up and running without problems.

Once you complete the setup, you'll be able to run the various commands provided from the command line.

Build locally

You need to have pnpm and bundler installed.

1. From the root /tabler directory, run installation in the command line:

• pnpm install
• bundler install

2. Then execute pnpm run start-plugins to start up the application stack.
3. Open http://localhost:3000 in your browser, and voilà.
4. Any change in the /src directory will build the application and refresh the page.

Note: Run pnpm run build for reforms a one off build application without refresh. Open http://localhost:3001 to configure the Web server.

Installation

Tabler is distributed via npm.

npm install --save @tabler/core

Running with Docker

Plain Docker

If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image. This Dockerfile is provided as an example to spin-up a container running Tabler.

Example of how to use this image:

1. Build the tabler image : docker build -t tabler .
2. Run the tabler image while mounting the src directory as well as the _config.yml file into the container.

Don't forget to expose the port 3000 so you can browse the website locally. You can also expose the port 3001 to have access to BrowserSync

docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler

Now open your browser to http://localhost:3000. Edit anything in the src/ folder and watch your browser refresh the page after it has been rebuilt.

Docker Compose

You can also use the docker compose config from this repo. Use docker compose build && docker compose up or docker compose up --build to build and start the container. Edit anything in the src/ folder the same way as with plain docker and access the same URLs and ports in your browser.

CDN support

All files included in @tabler/core npm package are available over a CDN.

Javascript

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

Styles

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">

Feature requests

https://tabler.canny.io/feature-requests

Bugs and feature requests

Found a bug or have a feature request? Please open a new issue.

🤓 Creators

Paweł Kuna

• https://twitter.com/codecalm
• https://github.com/codecalm
• https://codecalm.net

👨‍🚀 Contributors

This project exists thanks to all the people who contribute.

🌸 Backers

Thank you to all our backers! 🙏 Become a backer

License

See the LICENSE file.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

tabler-icons's Issues

Request change case

Perhaps like this

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-case" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <rect x="0" y="0" width="24" height="24" stroke="none"></rect>
  <circle cx="6" cy="6.5" r="3.5" />
  <line x1="9.5" y1="6" x2="10" y2="10" />
  <line x1="1" y1="23" x2="23" y2="1" />
  <polyline points="12 22 17 12 22 22" />
  <line x1="14" y1="19" x2="20" y2="19" />
</svg>

Icon request: Stars filled to 25, 50, 75, 100%

Could you please add four new icons for stars that are filled up to various points?

Example: (hollow star already exists)

This would allow making a rating component with half-stars.

Thanks for the awesome icon pack!

Request: More brand icons

Few more suggestions:

• YouTube
• Twitch
• Firefox
• Tumblr
• DeviantArt
• Reddit
• SoundCloud
• LinkedIn
• Microsoft
• Windows
• WhatsApp
  • See Issue #47
• Steam
  • See Issue #33
• Messenger
  • See Issue #53
• Mozilla
• Edge
• Internet Explorer
• Discord

Issues that are related:

• #19

Icon for Steam

Awesome work!

The pack has many social media icons but one for Steam is missing. I think it would be a nice addition.

Building and places types icons

Religous
Church
Synagogue
Mosque
Temple
Monastery

Historical:
Palace
Castle
Mansion
Column
Monument
Historical place

Public utility:
Government building
Educational building (schools, universities, etc.)
Cultural building (museum, theater, opera house)
Park
Square
Stadium / Entertainment hall
Cemetery
Hospital
Zoo
Racing Track
Market

Infrastructure:
Bridge
Station (bus or train for example)
Seaport
Airport
Dam
Street

Military
Tower
Fortification building
Wall

Residential:
Tenement house
House

Natural:
Mountain
Natural monument
Waterfall
National Park
Lake
River

Other:
Skyscraper
Hotel

Game icon

I can see you have a dice there to symbolise Gaming, but i suggest a more common icon (or more variations) to include. A better aproach would be game controllers (joysticks) or the like.
Example:

(taken from Ionic)

Icon request: LinkedIn

Using this icon set for my resume, a LinkedIn icon would be great! Thanks for an amazing set of icons

Add https://tablericons.com to the repo description

Perhaps it makes sense to link https://tablericons.com in the project description which appears above or besides the repo depending on what design you are on.

Could not find icon as per example

I tried to use

<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-disabled"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.25"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"

...

Click me

and i get below as output

Below works perfectly, but could not set the stroke width

Icon for Copyleft

I noticed that there's a copyright icon but no copyleft.

Thanks for the icons btw!

Database Icons

Fantastic work so far!

Would love to see a set of database icons:

Database Objects

• Database
• Table
• View
• Query
• Key
• Index
• Stored Procedure
• Function
• Schema
• User, Group, Role
• CSV file
• Log, Log File\table

Database Actions

• Insert into Table
• Delete from Table
• Update Table
• Take table offline/bring table online
• Export Data
• Import Data
• Run Query
• Run Stored Procedure
• Grant/revoke Permissions
• Replication

Icon request: 2 new arrows

Can you please add "arrow-bar-top" and "arrow-bar-bottom" to the set for symmetry? You already have "arrow-bar-down" and "arrow-bar-up" which are great. Illustrated suggestion below.

Text editor icons.

Hi Pawel,
first thanks for your work, it is just amazing!

My 50c:
It might be a good idea to have rich text editor icons in this pack.
Some icons may be:

• bold
• italic
• underline
• link/unlink
• strikethrough
• embed image
• embed video
• embed object
• iframe
• ordered list
• unordered list
• quote
• separator (horizontal line)
• align left/middle/right/justify
• insert table/row/column
• go fullscreen
• text color
• background color
• undo/redo

Can user upload their own SVG?

Not everyone has a GitHub account - and not everyone wants one. If they want to upload a good SVG picture, they'll have to create a Pull Request. So I suggest that there should be somewhere inside the website to upload images. Maybe you can use a database to store all the files? That'll be easier to add new files and also easier for others to implement this project.

stroke-width ignored

Hi,

thanks for your beautiful work! I'm having a hard time with stroke-width:

html:

<svg class="tabler-icon">
	<use xlink:href="../../icons/tabler-sprite.svg#tabler-circle-x" />
</svg>

and css:

.tabler-icon {
    height: 32px;
    width: 32px;
    color: #b31b1b;
    stroke-width: 0.85;
}

The size and color attributes are taken into account but not stroke-width. Any idea why?

Mobile view: only 1 column, try get 2nd (should be space?)

On the mobile view the list of icons is now only one column on my phone. It seems there should be enough space for at least a second column.

Importing svg icons into sketch goes wrong

I imported all icons into sketch, and most of them don't have any issues.

Brands

• Github
• Google
• Sketch

Border

• bottom
• vertical
• horizontal
• inner
• left
• none
• outer
• radius
• top
• right

Sketch imported SVG's

Sketch imported PNG's

Github page to search for icons

Would be great if a github page with search could be added so one can search the icons without having to download all the ruby prerequisites.

Incorrect view in in vector editing programs

As a designer, I intend to use the icons as I quite like the style. But they are inaccurately rendered in pretty much any software I opened them with (Adobe Illustrator, Sketch, even IconJar).

Typo In Skyscraper

The svg for the skyscraper icon is building-skyscrapper.svg instead of building-skyscraper.svg

Save icon?

I couldn't find an icon for a save button, you know, that floppy disk icon.

I believe this is rather essential and it would be great if you could add it :D

How can i use tablericons in my react project?

I already installed but how can i use it?

wrong pixel size in fonticon

I tried tabler-icons in my C++/Qt app as a replacement for FontAwesome and I noticed that I have to set font.pixelSize=46 to get 36px size. in FA font.pixelSize=36 gives proper 36px icons

Icon request: filled star & closed eye

These two icons seem important to me, because we already have star icon which I mainly use as "favorite" action - so filled star icon would resemble when item is favorited.

Second one is closed eye I planned to use on "password fields" for a user to toggle if password is visible or not while typing.

[Request] Pinned icon

Something like this:

Request: Some Unique Icons

• Medium
• Discord
• Quora
• Slack
• Tiktok
• WordPress

[Icon Request] Rocket Icon

It would be nice if there was a rocket icon. I like to use a rocket to signify that a button will launch something or falls into a game category.
Maybe something that looked like this.

Website for download

Do you have any plan for creating a website for this package and adding ability to download single icon and etc? @codecalm

[Request] Icon for whatsapp

please add an icon for whatsapp

Add transport control icons

Pretty standard emojis/icons used in many things.

• 🔀 Shuffle Tracks Button
• 🔁 Repeat Button
• 🔂 Repeat Single Button
• ▶ Play Button
• ⏩ Fast-Forward Button
• ⏭ Next Track Button
• ⏯ Play or Pause Button
• ◀ Reverse Button
• ⏪ Fast Reverse Button
• ⏮ Last Track Button
• 🔼 Upwards Button
• ⏫ Fast Up Button
• 🔽 Downwards Button
• ⏬ Fast Down Button
• ⏸ Pause Button
• ⏹ Stop Button
• ⏺ Record Button
• ⏏ Eject Button

floppy-disk is wrong (tab at top-left corner?), and seems redundant to device-floppy

Pillow.svg is actually a pill

file-upload icon

Hi,
there is a file-download icon but no file-upload one.
Thanks.

React components

It would be really great to get an official react package for these icons, something like react-feather.

Typo in footer: "web site" should be "website"

Typo in the footer, "web site" should be "website".

[Request] Icon representing counting or a specific count of X

An icon that represents counting up or down or the number/count of something would be a good addition to the existing catalogue of icons.
I suggest as an icon tally marks with four vertical strokes and one diagonal stroke. These are quite easy to create and represent counting in many parts of the world.

Icon Request: Rage Face Memes

• Rageguy
• Trollface
• Cereal Guy
• Okay Guy
• F* Yeah Guy
• Forever Alone Guy
• Y U NO
• “Me Gusta” Guy
• LOL Guy

Calendar icon with +

Would love an icon that represents "add calendar entry"

IconFont: wrong aligment/size of icon with texts

I'm testing the icon font and seem to have a problem with the alignment/size of the icons and text itself.

Reproduce:
https://jsfiddle.net/mauriblint/6zd7jsL1/

Thanks,
Mauricio

Incorrect rendering in Figma

Repeat, repeat-once, arrow-forward…

They look well on browser, though.

Explicit UI to set color as “currentColor” on website

It would be ideal if you could set the copied icon color to currentColor. This is an ideal default, since it then inherits the color from its context in a page. Some UI tweaks that would accomplish this:

• adding an “x” button to the color field that clears it, setting the icons to currentColor and showing a placeholder in the field of currentColor or maybe inherit
• making the “reset” button clear the color field
• adding an “inherit” button to the color bar

I had also thought of some UI tweaks that would help communicate what emptying out the color field does:

• making the default icon color a less neutral color (perhaps purple, to match the button?)
• making the icon labels bold, so you can see that the icon color matches when it’s set to currentColor.

Filled Variations

Multiple Strokes feature is awesome. My suggestion is to also add a filled icon option, to cover a wider range of usages.
Examples taken from Ionic

Icon request for different exercise activities

The bike and some sports icons are great. Please consider adding more icons for exercise like walking, running, swimming, hiking, etc. Fantastic icons, keep up the great work!

icon question mark

there is a need for question mark icon

Smartphone vibrating

First thank you for all those SVGs!
I'd love to see an icon for smartphone vibrating. Thanks again.

Thank you!

These are some really really nice icons!

Thanks for open sourcing them and licensing them so liberally. ^>^

trees

May I humbly suggest that these do not look like trees? I thought these were ice cream bars and wondered who'd need such a specific icon).

icon font don't seem to render properly

As can be seen on https://htmlpreview.github.io/?https://github.com/tabler/tabler-icons/blob/master/iconfont/tabler-icons.html, icons such as alert-circle are all filled, while their svg counterpart https://github.com/tabler/tabler-icons/blob/master/icons/alert-circle.svg looks just fine.

[Request] Icon for messenger

Please, add icon for messenger

Social media icons

It will be nice to have icons like:

• Facebook
• Twitter
• Linkedin
• Youtube
• Instagram
• Pinterest
• Snapchat
• Reddit