What is the blur icon used for?

It's used to signify a blurred or obscured visual state, often for privacy, effects, or indicating hidden information like passwords.

How do I use the BlurIcon in React?

Import both HugeiconsIcon and BlurIcon, then render .

What is the license for HugeIcons?

HugeIcons are released under the MIT license, allowing for free commercial and non-commercial use.

blur icon

HugeIcons · BlurIcon · MIT

Download SVG

The HugeIcons blur icon visually represents a softening or obscuring of an image or element, commonly used to indicate a blurred state, a privacy filter, or a visual effect.

Common uses

Applying a background blur effect
Indicating a password field before typing
Representing a privacy or 'redacted' state

Use it in React

Install

npm i @hugeicons/react @hugeicons/core-free-icons

Import & render

import { HugeiconsIcon } from '@hugeicons/react';
import { BlurIcon } from '@hugeicons/core-free-icons';

<HugeiconsIcon icon={BlurIcon} size={24} strokeWidth={1.5} />

Details

Library: HugeIcons (5,121 icons)
License: MIT
viewBox: 0 0 24 24
Keywords: obscuresoftenfilterprivacy

FAQ

What is the blur icon used for?: It's used to signify a blurred or obscured visual state, often for privacy, effects, or indicating hidden information like passwords.
How do I use the BlurIcon in React?: Import both HugeiconsIcon and BlurIcon, then render <HugeiconsIcon icon={BlurIcon} />.
What is the license for HugeIcons?: HugeIcons are released under the MIT license, allowing for free commercial and non-commercial use.

Related icons

The same idea in other libraries, and near matches in HugeIcons.

tabler

Looking for something else? Search HugeIcons 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 →