Hand-picked weekly

Never miss a tool worth knowing.

The best new tools, hand-picked and delivered weekly. No spam — just signal.

Email address

Discover the best tools for every task. A curated directory for people who love great software.

Browse

Categories
Toolkits
Saved
Search

Company

About
My Account
Sign in

Connect

X / Twitter
GitHub
LinkedIn
Email us

© 2026 ToolFomo

Heroicons — ToolFomo

Heroicons

Heroicons

A set of free, hand-crafted SVG icons designed by the creators of Tailwind CSS, available in multiple styles and sizes.

freeweb#svg-icons #tailwind-css #open-source #react #vue #free

What you can do with Heroicons

Practical ideas and workflows

1

Website Navigation Icons

•Select a Heroicon that represents navigation (e.g., home, settings).
•Copy the SVG code from the Heroicons website.
•Paste the SVG code into your website's HTML where you want the icon to appear.
•Style the icon using CSS or Tailwind classes if needed.

2

Dashboard Data Visualization

Categories

More like this

Tools with similar features

Remix Icon

remix-icon

Remix Icon is an open-source library offering over 2,700 neutral-style system icons, available in both outlined and filled styles, designed for designers and developers.

•Identify the data categories that require icons (e.g., sales, users, traffic).
•Choose corresponding Heroicons that best illustrate these data categories.
•Insert the selected SVG icons into your dashboard interface.
•Ensure proper alignment and styling consistent with your dashboard theme.

3

Mobile App User Interface

•Determine which actions need icon representation in your app (e.g., add, delete, share).
•Browse and select Heroicons that fit the app's design aesthetic.
•Integrate the icons into your app's UI, ensuring they are appropriately sized for mobile use.
•Test the icons for clear visibility and functionality in the app environment.

4

Marketing Material Design

•Select key themes or actions that need visual representation (e.g., launch, promotion).
•Find relevant Heroicons that can easily convey these themes.
•Incorporate the icons into your flyers, brochures, or digital ads using a design tool.
•Adjust the icons' size and color to match your marketing materials.

The Component Gallery

The Component Gallery

the-component-gallery

An up-to-date repository of interface components from various design systems, serving as a reference for building user interfaces.

Fontello

Fontello

fontello

Fontello is a web-based tool that allows users to create custom icon fonts by selecting icons from various open-source icon sets.

Tabler Icons

Tabler Icons

tabler-icons

A free and open-source library offering over 5,000 high-quality SVG icons designed for web and app interfaces.

Icônes

Icônes

icônes

Icônes is a web-based icon explorer that provides access to over 180,000 public domain icons from various collections, facilitating easy integration into web applications.

TailGrids

tailgrids

TailGrids is a comprehensive library offering over 600 Tailwind CSS UI components, blocks, and templates for building web applications, landing pages, e-commerce sites, and dashboards across HTML, React, Vue, and Figma.