The Heroicons face frown icon depicts a sad or unhappy face, commonly used to represent negative feedback, errors, or disappointment in a user interface.
Common uses
- Displaying error messages
- Indicating failed actions
- Representing negative user sentiment
Use it in React
Install
npm i @heroicons/reactImport & render
import { FaceFrownIcon } from '@heroicons/react/24/outline';
<FaceFrownIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<FaceFrownIcon className="size-6" />24/solid
<FaceFrownIcon className="size-6" />20/solid
<FaceFrownIcon className="size-6" />16/solid
<FaceFrownIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- facefrownsad faceunhappy facedisappointednegative feedback
FAQ
- What is the face frown icon used for?
- It's typically used to signify negative states like errors, failures, or general dissatisfaction in a UI.
- How do I use the face frown icon in React?
- You can import it from Heroicons like this: `import { FaceFrownIcon } from '@heroicons/react/24/outline'`. Then use it as a component: `<FaceFrownIcon className="h-6 w-6" />`.
- What is the license for Heroicons?
- Heroicons are released under the MIT license, which allows for free use in both personal 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 →