The Heroicons equals icon depicts two horizontal parallel lines, commonly used to represent equality, equivalence, or a matching condition in user interfaces.
Common uses
- Displaying a 'match' or 'equal' status.
- Indicating a comparison result.
- Representing a 'same as' relationship.
Use it in React
Install
npm i @heroicons/reactImport & render
import { EqualsIcon } from '@heroicons/react/24/outline';
<EqualsIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<EqualsIcon className="size-6" />24/solid
<EqualsIcon className="size-6" />20/solid
<EqualsIcon className="size-6" />16/solid
<EqualsIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- equalsequalparallel linesmatchequivalence
FAQ
- What is the equals icon used for?
- It's typically used to signify equality, equivalence, or that two items are the same. This can be for status indicators, comparison results, or matching criteria.
- How do I use the equals icon in React?
- You can import and use it directly in your React components like this: import { EqualsIcon } from '@heroicons/react/24/outline'; <EqualsIcon className="h-6 w-6" />
- What is the license for Heroicons?
- Heroicons are provided under the MIT license, allowing for free use in both open-source and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →