Title: The Icon Block
Author: Nick Diego
Published: <strong>2021년 9월 25일</strong>
Last modified: 2026년 1월 18일

---

플러그인 검색

![](https://ps.w.org/icon-block/assets/banner-772x250.png?rev=3122589)

![](https://ps.w.org/icon-block/assets/icon-256x256.png?rev=3122589)

# The Icon Block

 작성자: [Nick Diego](https://profiles.wordpress.org/ndiego/)

[다운로드](https://downloads.wordpress.org/plugin/icon-block.2.0.0.zip)

[실시간 미리보기](https://ko.wordpress.org/plugins/icon-block/?preview=1)

 * [세부사항](https://ko.wordpress.org/plugins/icon-block/#description)
 * [평가](https://ko.wordpress.org/plugins/icon-block/#reviews)
 *  [설치](https://ko.wordpress.org/plugins/icon-block/#installation)
 * [개발](https://ko.wordpress.org/plugins/icon-block/#developers)

 [지원](https://wordpress.org/support/plugin/icon-block/)

## 설명

The Icon Block plugin registers a single, easy-to-use block that allows you to add
custom SVG icons and graphics to the WordPress block editor (Gutenberg).

The plugin also includes the complete WordPress icon library with 290+ SVG icons.

### Key features

 * 290+ native WordPress icons, including social logos
 * Use any custom SVG icon or graphic
 * Insert icons from your Media Library if SVG uploads are supported
 * Includes handy icon controls (link, rotate, alignment, colors, border, padding,
   margin, etc.)
 * Fully compatible with the Site Editor
 * No block library required 🎉
 * Built almost entirely with native WordPress components
 * Will get additional functionality as it’s added to WordPress core
 * Register your own custom icon library. [Learn more](https://nickdiego.com/adding-custom-icons-to-the-icon-block/)

### Stay connected

 * [View on GitHub](https://github.com/ndiego/icon-block)
 * [Visit plugin project page](https://nickdiego.com/projects/icon-block/)
 * [Follow on Twitter](https://twitter.com/nickmdiego)

## 스크린샷

 * [[
 * The Icon Block includes icon controls such as color, rotation, alignment, padding,
   and border-radius.
 * [[
 * The Icon Block adapts to your layout, whether you need a big or small icon.
 * [[
 * Use the “quick inserter” to pick the WordPress icon you need.
 * [[
 * The Icon Block includes the WordPress icon library, allowing you to insert 270
   + graphics.
 * [[
 * Create your own custom icons by simply copying/pasting the SVG code. Then, modify
   the icon to suit your needs.
 * [[
 * You are not limited to traditional icons. Any SVG-based graphic will work as 
   well. The block will respect any hard-coded color/fill values in the provided
   SVG.

## 블록

이 플러그인은 1개의 블록을 제공합니다.

 *   Icon Insert an SVG icon or graphic.

## 설치

 1. You have a couple of options:
 2.  * Go to Plugins → Add New and search for “Icon Block”. Once found, click “Install”.
     * Download the Icon Block from WordPress.org and make sure the folder is zipped.
       Then upload via Plugins → Add New → Upload.
     * Open the block inserter within the Block Editor (Gutenberg) and search for “
       icon”. The plugin should appear and allow you to install it directly. Skip steps
       2 and 3.
 3. Activate the plugin through the ‘Plugins’ screen in WordPress.
 4. Search for the block within the Block Editor (Gutenberg) and begin using it.

## FAQ

### Where can I get more icons?

Currently, the Icon Block only includes the WordPress icon library. That said, the
plugin allows you to render **any** SVG-based icon by simply copying/pasting the
code into the icon text area when using the “Add custom icon” option! See the screenshots
for reference. This gives you complete flexibility and allows you to use practically
any icon you want. A great source for free SVG icons is Google’s Material Icons 
project, Font Awesome, and Iconic, to name a few.

The Icon Block also allows you to register your own custom block library. This needs
to be done externally in your theme or via a plugin but provides complete flexibility
over the icons available in the plugin. [Learn more](https://nickdiego.com/adding-custom-icons-to-the-icon-block/).

### Why is my icon not changing color?

The Icon Block includes controls for the icon’s color and background. However, if
your SVG icon has hard-coded color/fill values, the plugin will respect those instead
of any applied custom colors.

### Why can’t I add SVG icons from my Media Library?

By default, WordPress does not allow you to add SVG files to your Media Library,
but you can enable this functionality using plugins like [Safe SVG](https://wordpress.org/plugins/safe-svg/).
If SVG uploads are enabled, you will see the option to insert icons from Media Library
in the Icon Block.

### Why is the block not working for certain users?

WordPress only allows Administrators and Editors to save “Unfiltered HTML” content,
which includes SVGs. The Icon Block will not work properly for users who are at 
the Author level or lower.

Note that WordPress multisite installations have additional restrictions. “Unfiltered
HTML” is restricted to Super Admins on multisite. To enable “Unfiltered HTML” content
for site Administrators and Editors, you will need to use a [code snippet](https://kellenmace.com/add-unfiltered_html-capability-to-admins-or-editors-in-wordpress-multisite/),
the [Unfiltered MU](https://wordpress.org/plugins-wp/unfiltered-mu/) plugin, or 
something similar. Regrettably, this is a WordPress restriction and needs to be 
handled outside of the Icon Block.

## 후기

![](https://secure.gravatar.com/avatar/066435fa3ac063705342d36bc24212853215d9507d60e5219dfa9fffd067079c?
s=60&d=retro&r=g)

### 󠀁[We use this on every project](https://wordpress.org/support/topic/we-use-this-on-every-project-2/)󠁿

 [STHLM Web Design](https://profiles.wordpress.org/sthlmwebdesign/) 2025년 12월 
1일

Wonderful little block.

![](https://secure.gravatar.com/avatar/9756f9568c6d5ea415197d2ec40a01a11bdda45926afe0bcc94259135e8e152d?
s=60&d=retro&r=g)

### 󠀁[Great Plugin – Thank you!](https://wordpress.org/support/topic/great-plugin-thank-you-155/)󠁿

 [brings](https://profiles.wordpress.org/brings/) 2025년 4월 10일

Great Plugin – easy to use and very helpful – thank you

![](https://secure.gravatar.com/avatar/b1829b6b7f099d725c4f8c5c9fdc42d45587d86341e82e614f05f6719a981522?
s=60&d=retro&r=g)

### 󠀁[Easy to use](https://wordpress.org/support/topic/easy-to-use-5159/)󠁿

 [phoenix36](https://profiles.wordpress.org/phoenix36/) 2025년 1월 13일

Good plugin. Very easy to use for nice icon block in posts

![](https://secure.gravatar.com/avatar/2ce24492279223e09e666c760384573bc045d78af32a1459b8fcf341f7ab56a1?
s=60&d=retro&r=g)

### 󠀁[Easy to use and works very well](https://wordpress.org/support/topic/easy-to-use-and-works-very-well-5/)󠁿

 [Pär Thernström](https://profiles.wordpress.org/eskapism/) 2025년 1월 3일

I like it alot!

![](https://secure.gravatar.com/avatar/344653ee76e4fc90cb406062cd8a6fc04977571f5eb09af7ae58736249d65f98?
s=60&d=retro&r=g)

### 󠀁[Excellent](https://wordpress.org/support/topic/excellent-13488/)󠁿

 [Ryan Hellyer](https://profiles.wordpress.org/ryanhellyer/) 2024년 7월 5일

Does only what it says it does on the lid. Perfect.

![](https://secure.gravatar.com/avatar/296b8de46c55cf788b0fb3db38f49b222b8e36ef2bcac3a1355b45b749d6ff31?
s=60&d=retro&r=g)

### 󠀁[So cool!](https://wordpress.org/support/topic/so-cool-46/)󠁿

 [snoop23](https://profiles.wordpress.org/snoop23/) 2024년 4월 21일

I love WordPress and the new block themes. And plugins like these are the icing 
on the cake. Thank you!

 [ 모든 29 평가 읽기 ](https://wordpress.org/support/plugin/icon-block/reviews/)

## 기여자 & 개발자

“The Icon Block”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에
기여하였습니다.

기여자

 *   [ Nick Diego ](https://profiles.wordpress.org/ndiego/)
 *   [ Outermost ](https://profiles.wordpress.org/outermostdesign/)

“The Icon Block”(이)가 7 개 언어로 번역되었습니다. 기여해 주셔서 [번역자](https://translate.wordpress.org/projects/wp-plugins/icon-block/contributors)
님께 감사드립니다.

[자국어로 “The Icon Block”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/icon-block)

### 개발에 관심이 있으십니까?

[코드 탐색하기](https://plugins.trac.wordpress.org/browser/icon-block/)는, [SVN 저장소](https://plugins.svn.wordpress.org/icon-block/)
를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/icon-block/)
을 [RSS](https://plugins.trac.wordpress.org/log/icon-block/?limit=100&mode=stop_on_copy&format=rss)
로 구독하세요.

## 변경이력

#### 2.0.0

2024-11-08

If you’re upgrading from a version before v2.0.0 and have icons with custom rotation
and styling, you may notice slight changes in their appearance. This is due to an
update in how rotation is managed within the block.

**Added**

 * Added full 360 degree rotation support.
 * Added support for `contentOnly` editing.
 * Added support for text nodes within SVG icons.
 * Added localStorage support for the preview size in the Icon Library.

**Changed**

 * Updated “Tested up to” to WordPress 6.7.
 * Updated minimum WordPress version to 6.5.
 * Updated the way rotation and vertical/horizontal flipping are handled. CSS classes
   are no longer used.
 * Updated the deprecated `useSetting` function to `useSettings`.
 * Improved the positioning of the quick inserter modal.
 * Updated the icon placeholder to better match Core.
 * Updated the link control to better match Core.
 * Updated general component styling to match Core.

**Removed**

 * Removed the deprecated `getEditorSettings` conditional.

**Fixed**

 * Fixed the bug where values would not get reset when closing the custom icon editor
   modal.
 * Fixed the nested toolbar visual bug by replacing `DropdownMenu` with `Dropdown`.

#### 1.9.0

2024-07-20

**Added**

 * Add support for `clientNavigation` interactivity, meaning that the Icon Block
   can now be placed in Query Loops with client-side navigation enabled.

**Changed**

 * Update “Tested up to” to WordPress 6.6.
 * Update minimum WordPress version to 6.4.
 * Update minimum PHP version 7.4.
 * Update the settings panel to use the `ToolsPanel` component, which is consistent
   with WordPress Core.
 * Update the Playground blueprint for the Live Preview.

**Removed**

 * Remove the custom `OptionsPanel` component in favor of the Core `ToolsPanel` 
   and `ToolsPanelItems` components.

**Fixed**

 * Fix the bug causing icon categories to become unalphabetized after the search.
 * Fix text overflow bug caused by custom icon categories with long names.
 * Fix the bug where the icon color input would get duplicated when setting the 
   icon label. This occurred when `blockInspectorTabs` was set to `false`.
 * Fix a typo in the “Justify Stretch” icon name.

#### 1.8.0

2024-03-24

**Added**

 * The Icon Block can now be added to Navigation blocks (requires WordPress 6.5 
   or Gutenberg 17.6+)
 * Add Playground blueprint for live preview in the Plugin Directory.

**Changed**

 * Update “Tested up to” to WordPress 6.5.
 * Update “Requires at least” to WordPress 6.3.

#### 1.7.0 – 2024-01-02

**Added**

 * Add X social icon.

**Changed**

 * Bump the “Tested up to” version to WordPress 6.4.
 * Update hover styles in icon pickers to match Core styling.
 * Remove custom placeholder illustration.

**Fixed**

 * Fix the text area height in the custom icon editor modal.

#### 1.6.0 – 2023-07-29

**Added**

 * Add Threads and WhatsApp social icons.
 * Add Core icons new in WordPress 6.2: Border, Caption, Chevron Up/Down, Comment
   Edit Link, Copy, Drawer Left, Drawer Right, Filter, Justify Stretch, Line Dashed,
   Line Dotted, Line Solid, List Item, Lock Outline, Lock Small, Seen, Shadow, Shuffle,
   and Unseen

**Changed**

 * **Update minimum required WordPress version to 6.2**. We want to be utilizing
   the latest functionality in WordPress.
 * Update to block API v3 for better 6.3 compatibility.
 * Disable dimension and border default controls for better 6.3 compatibility.
 * Move color controls to the native “color” panel. ([#35](https://github.com/ndiego/icon-block/pull/35))
 * Simplify transform CSS. ([#32](https://github.com/ndiego/icon-block/pull/32))

#### 1.5.0 – 2023-03-09

**Added**

 * Add dropzone support for media library uploads and custom SVGs.
 * Add support for style elements in custom SVGs.
 * Add the ability to insert an SVG icon from the Media Library if SVG uploads are
   enabled on the website.
 * Add the ability to clear the current icon.

**Changed**

 * Update the block inspector panels for WordPress 6.2 compatibility.
 * Update the replace dropdown to use the native DropDownMenu component for improved
   WordPress 6.2 compatibility.

**Fixed**

 * Fix invalid DOM properties error. Thanks @DeoThemes for reporting this issue 
   and suggesting a solution! ([#25](https://github.com/ndiego/icon-block/pull/25))
 * Fix a few minor CSS issues for WordPress 6.2 compatibility.

#### 1.4.0 – 2023-01-03

**Added**

 * Add icon height control.

**Changed**

 * Update WordPress version requirement to 6.0+.
 * Update icon color handling to better support Global Styles.
 * Update icon width control to support additional units.
 * Update settings panel to mirror Core `ToolsPanel` implementations and support
   setting resets.

#### 1.3.2 – 2022-10-17

**Fixed**

 * Fix incorrect class specification.
 * Fix placeholder background color in prep for WordPress 6.1.

#### 1.3.1 – 2022-10-01

**Fixed**

 * Fix alignment classes not getting applied in the correct spot.

#### 1.3.0 – 2022-09-20

**Added**

 * Add the ability to toggle icon color fill. Useful for SVG icons that use stroke.
 * Add the ability to disable custom icons using the `iconBlock.enableCustomIcons`
   filter.
 * Add title attribute support.
 * Add alternative Reddit icon to match WordPress core.
 * Add new WordPress icon: `title`

**Changed**

 * Update block architecture to support features in WordPress 6.1.
 * Update block placeholder to be more consistent with core placeholders.
 * Improve support for custom icons without a fill color.
 * Improve the UI in various places.

**Removed**

 * Remove deprecated WordPress icons: `archiveTitle`, `commentTitle`, `postTitle`,
   and `queryTitle`

**Fixed**

 * Fix bug where icon color and fill were overridden by theme colors.
 * Fix visual inconsistency between the frontend and Editor due to box-sizing not
   getting applied in the Editor.

#### 1.2.0 – 2022-05-02

**Added**

 * Add alpha support for icon and background colors.
 * Add link rel support.
 * Add support for custom icon types.
 * Add new WordPress icons: `post`, `postTerms`, `queryTitle`, `removeSubmenu`, 
   and `row`

**Changed**

 * Remove deprecated WordPress icons: `alignJustifyAlt`, `cogAlt`, and `trashFilled`

#### 1.1.2 – 2022-01-27

**Fixed**

 * Fix bug where custom SVG icons with `style` attributes would not render correctly.
   Thanks @endres for reporting this issue.

#### 1.1.1 – 2022-01-25

**Changed**

 * Include both theme and WordPress default color palettes in the icon and background
   color picker.

#### 1.1.0 – 2022-01-25

**Added**

 * Add additional border support (color, width, style)
 * Add margin support
 * Add the ability to set an `aria-label` on the icon and link.
 * Add the core Unlock icon.
 * Add the core Comment Author Avatar icon.
 * Add the core Comment Author Name icon.
 * Add the core Comment Content icon.
 * Add the core Comment Edit Link icon.
 * Add the core Comment Reply Link icon.

**Changed**

 * Update inserter modal components to use `isFullScreen` to better resemble core
   modals.
 * Update styling on inserter modals for improved mobile responsiveness.
 * Import the Align None, Color, Reset, and Styles icons directly from @wordpress/
   icons.
 * Remove the custom search component in favor of the core component from @wordpress/
   components.
 * Restructure stylesheets to better conform with block standards.

**Fixed**

 * Fix bug where hyphens and colons would be incorrectly stripped from attribute
   names in custom icons. Thanks @stokesman for the PR. ([#5](https://github.com/ndiego/icon-block/pull/5))

#### 1.0.0 – 2021-10-06

**Added**

 * Added the WordPress icon library featuring 270+ icons.
 * Add new placeholder and quick icon insertion experience.
 * Added new custom icon editing modal for an improved insertion experience.

#### 0.1.2 – 2021-09-27

**Added**

 * Added scale transform on the frontend when an icon is linked to improve a11y.
   This matches the hover styling in the core WordPress Social Icons block. Future
   improvements are planned, including dedicated hover/focus settings within the
   block itself.

**Fixed**

 * Fixed translation file.
 * Fixed version in block.json so block can be added to the Block Directory.

#### 0.1.1 – 2021-09-25

**Fixed**

 * Fixed SVG sanitization for non-standard SVGs.

#### 0.1.0 – 2021-09-25

 * Initial release 🎉

## 커뮤니티 플러그인

이 플러그인은 커뮤니티에서 개발 및 지원합니다. [이 플러그인에 기여하기](https://github.com/ndiego/icon-block)

## 기초

 *  버전 **2.0.0**
 *  최근 업데이트: **3개월 전**
 *  활성화된 설치 **30,000+**
 *  워드프레스 버전 ** 6.5 또는 그 이상 **
 *  다음까지 시험됨: **6.9.4**
 *  PHP 버전 ** 7.4 또는 그 이상 **
 *  언어
 * [Czech](https://cs.wordpress.org/plugins/icon-block/), [Dutch](https://nl.wordpress.org/plugins/icon-block/),
   [English (US)](https://wordpress.org/plugins/icon-block/), [French (France)](https://fr.wordpress.org/plugins/icon-block/),
   [Italian](https://it.wordpress.org/plugins/icon-block/), [Kurdish (Sorani)](https://ku.wordpress.org/plugins/icon-block/),
   [Russian](https://ru.wordpress.org/plugins/icon-block/), 그리고 [Vietnamese](https://vi.wordpress.org/plugins/icon-block/).
 *  [자국어로 번역하기](https://translate.wordpress.org/projects/wp-plugins/icon-block)
 * 태그:
 * [block](https://ko.wordpress.org/plugins/tags/block/)[icon](https://ko.wordpress.org/plugins/tags/icon/)
   [icon-block](https://ko.wordpress.org/plugins/tags/icon-block/)[SVG](https://ko.wordpress.org/plugins/tags/svg/)
   [SVG block](https://ko.wordpress.org/plugins/tags/svg-block/)
 *  [고급 보기](https://ko.wordpress.org/plugins/icon-block/advanced/)

## 평점

 별 5점 만점에 5점.

 *  [  29/5-별점 후기     ](https://wordpress.org/support/plugin/icon-block/reviews/?filter=5)
 *  [  0/4-별점 후기     ](https://wordpress.org/support/plugin/icon-block/reviews/?filter=4)
 *  [  0/3-별점 후기     ](https://wordpress.org/support/plugin/icon-block/reviews/?filter=3)
 *  [  0/2-별점 후기     ](https://wordpress.org/support/plugin/icon-block/reviews/?filter=2)
 *  [  0/1-별점 후기     ](https://wordpress.org/support/plugin/icon-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/icon-block/reviews/#new-post)

[모든  리뷰 보기](https://wordpress.org/support/plugin/icon-block/reviews/)

## 기여자

 *   [ Nick Diego ](https://profiles.wordpress.org/ndiego/)
 *   [ Outermost ](https://profiles.wordpress.org/outermostdesign/)

## 지원

할 말 있으신가요? 도움이 필요하신가요?

 [지원 포럼 보기](https://wordpress.org/support/plugin/icon-block/)