--- title: "How to Add Icons in WordPress?" url: https://nexterwp.com/docs/add-icon-in-wordpress/ date: 2024-03-01 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "Sometimes a page needs one icon on its own — above a heading, beside a statistic, as a small link back to the top. The Icon block places a single..." image: https://nexterwp.com/wp-content/uploads/2024/05/icon-block-settings-overview-1024x519.jpg word_count: 455 --- # How to Add Icons in WordPress? ## Key Takeaways - Icon block places one icon with its own colour, size, hover colour, alignment, and optional link, and it works in Nexter Blocks free and Nexter Blocks Pro. - Nexter Blocks enables the Icon block under Nexter > Blocks in the WordPress dashboard, and the block accepts an icon from the library or an SVG upload. - Icon block has one icon per block, does not animate icons, and needs link text or a label for screen readers when the icon is the only content of a link. Sometimes a page needs one icon on its own — above a heading, beside a statistic, as a small link back to the top. The Icon block places a single icon with its own colour, size and optional link, without borrowing a larger block to get it. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-icon/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Icon, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=uQ6xzimrLi0 ## Steps - Add the **Icon** block to your page. ![Adding the Icon block](https://nexterwp.com/wp-content/uploads/2024/03/icon-activation-new-1-1024x330.png) - Choose an icon from the library, or switch the type to **SVG** and upload your own. - Set the icon **size** and **colour**, and the hover colour. - Set the **alignment**. - Add a **link** if the icon should be clickable, then publish. ## How It Behaves The Icon block renders one icon in a small wrapper, so it can be aligned and spaced like any other block rather than being locked inside a card. - **It renders a compact wrapper** — measured, `span.tpgb-nicon-wrap`, 24 pixels tall at the default size.- **A link makes the icon itself clickable** — measured, the wrapper's contents become an anchor.- **Any icon class from the library is accepted**, so you are not limited to a short preset list.- **Separate normal and hover colours** let the icon respond without any custom CSS.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block. ## Limitations - **One icon per block.** For a row of social icons use the [Social Icon block](https://nexterwp.com/docs/add-social-icons-in-wordpress/), which is built for that.- **An icon on its own carries no meaning to a screen reader.** If the icon is the only content of a link, give the link text or a label so it is not announced as empty.- **Uploading SVG files needs the right permissions** in WordPress, and SVGs from untrusted sources should not be uploaded at all.- The block draws an icon; it does not animate it — use the Draw SVG block for that. ## Troubleshooting ### My icon is not appearing Check an icon is actually selected, and that the icon type matches what you set — a block set to SVG with no file uploaded renders nothing. ### My SVG will not upload WordPress blocks SVG uploads by default for security. Your administrator has to allow it, and only for files you trust. ### The icon is tiny or huge Set the icon size on the block rather than scaling it with CSS — the size control is in the block's own settings. ### The icon is a link but screen readers announce nothing An icon has no text. Add a label to the link so the destination is announced. ## Related Docs - [Add social icons in WordPress](https://nexterwp.com/docs/add-social-icons-in-wordpress/)- [Add a button in WordPress](https://nexterwp.com/docs/add-button-in-wordpress/)- [Add a heading in WordPress](https://nexterwp.com/docs/add-heading-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why is my icon not showing up in WordPress?** A: A missing icon usually means the block has no icon selected, or the icon type does not match what was set. The Icon block renders a single icon inside a compact wrapper, so if it is set to SVG with no file uploaded, nothing appears. Nexter Blocks keeps this block lightweight, so the fix is usually in the block settings rather than in custom CSS. **Q: Can I upload my own SVG icon in the Icon block?** A: SVG upload is part of the Icon block workflow, but WordPress blocks SVG uploads by default for security. That means an administrator has to allow SVG uploads first, and only trusted files should be used. This matters because untrusted SVGs are a security risk, so the safe path is to upload only assets you control. **Q: How do I stop an icon from looking tiny or huge?** A: The size should be controlled from the block itself, not by scaling it with CSS. The Icon block has its own size control in the settings, which keeps the wrapper measured correctly and avoids layout weirdness. Nexter Blocks renders the icon in a compact wrapper, so using the built-in size setting gives more predictable spacing than forcing dimensions later. **Q: What should I use instead of an icon when I need multiple icons in a row?** A: The Icon block is built for one icon per block, so it is not the right choice for a row of social icons. For that layout, use the [Social Icon block](https://nexterwp.com/docs/add-social-icons-in-wordpress/), which is designed for multiple icons together. That separation matters because each block serves a different job: one standalone symbol versus a grouped social set. **Q: Does the Icon block work without Nexter Blocks Pro?** A: The Icon block is a free block and renders identically with Nexter Blocks Pro deactivated. It works in Nexter Blocks free edition as well as with Nexter Blocks Pro, so it is not tied to a paid-only setup. The page also says it must be switched on under Nexter > Blocks in your WordPress dashboard before you use it. **Q: How do I make an icon link accessible to screen readers?** A: An icon by itself carries no meaning to a screen reader, so an icon-only link needs text or a label. If you skip that label, screen readers can announce an empty link even though the icon is clickable. This is especially important because the Icon block makes the wrapper contents into an anchor when you add a link, so accessibility depends on giving that link real text context.