The SVG icon attached to the theme is used as an icon for the paragraph block or heading block, or list block (unnumbered list) by adding the class name to the advanced / additional CSS class of the block editor. can do. Reflect the class name by simply pasting it into a paragraph block.
In addition, adding a hanging-indent class makes it easier to place icons.
Please try it once
Example usage with list block
| Icon | Block Editor Additional CSS Class Name |
|---|---|
| ico-lock | |
| ico-lock icon-cool | |
| ico-lock icon-notice | |
| ico-lock icon-info | |
| ico-lock icon-alert | |
| ico-lock icon-dark | |
| ico-embed | |
| ico-embed icon-cool | |
| ico-embed icon-notice | |
| ico-embed icon-info | |
| ico-embed icon-alert | |
| ico-embed icon-dark | |
| ico-bell | |
| ico-bell icon-cool | |
| ico-bell icon-notice | |
| ico-bell icon-info | |
| ico-bell icon-alert | |
| ico-bell icon-dark | |
| ico-location | |
| ico-location icon-cool | |
| ico-location icon-notice | |
| ico-location icon-info | |
| ico-location icon-alert | |
| ico-location icon-dark | |
| ico-pdf | |
| ico-pdf icon-cool | |
| ico-pdf icon-notice | |
| ico-pdf icon-info | |
| ico-pdf icon-alert | |
| ico-pdf icon-dark | |
| ico-zip | |
| ico-zip icon-cool | |
| ico-zip icon-notice | |
| ico-zip icon-info | |
| ico-zip icon-alert | |
| ico-zip icon-dark | |
| ico-html5 | |
| ico-html5 icon-cool | |
| ico-html5 icon-notice | |
| ico-html5 icon-info | |
| ico-html5 icon-alert | |
| ico-html5 icon-dark | |
| ico-category | |
| ico-category icon-cool | |
| ico-category icon-notice | |
| ico-category icon-info | |
| ico-category icon-alert | |
| ico-category icon-dark | |
| ico-tag | |
| ico-tag icon-cool | |
| ico-tag icon-notice | |
| ico-tag icon-info | |
| ico-tag icon-alert | |
| ico-tag icon-dark | |
| ico-clock | |
| ico-clock icon-cool | |
| ico-clock icon-notice | |
| ico-clock icon-info | |
| ico-clock icon-alert | |
| ico-clock icon-dark | |
| ico-contrast | |
| ico-contrast icon-cool | |
| ico-contrast icon-notice | |
| ico-contrast icon-info | |
| ico-contrast icon-alert | |
| ico-contrast icon-dark | |
| ico-home | |
| ico-home icon-cool | |
| ico-home icon-notice | |
| ico-home icon-info | |
| ico-home icon-alert | |
| ico-home icon-dark | |
| ico-bookmark | |
| ico-bookmark icon-cool | |
| ico-bookmark icon-notice | |
| ico-bookmark icon-info | |
| ico-bookmark icon-alert | |
| ico-bookmark icon-dark | |
| ico-quote | |
| ico-quote icon-cool | |
| ico-quote icon-notice | |
| ico-quote icon-info | |
| ico-quote icon-alert | |
| ico-quote icon-dark | |
| ico-edit | |
| ico-edit icon-cool | |
| ico-edit icon-notice | |
| ico-edit icon-info | |
| ico-edit icon-alert | |
| ico-edit icon-dark | |
| ico-web | |
| ico-web icon-cool | |
| ico-web icon-notice | |
| ico-web icon-info | |
| ico-web icon-alert | |
| ico-web icon-dark | |
| ico-human | |
| ico-human icon-cool | |
| ico-human icon-notice | |
| ico-human icon-info | |
| ico-human icon-alert | |
| ico-human icon-dark | |
| ico-new-tab | |
| ico-new-tab icon-cool | |
| ico-new-tab icon-notice | |
| ico-new-tab icon-info | |
| ico-new-tab icon-alert | |
| ico-new-tab icon-dark | |
| ico-checkbox_checked | |
| ico-checkbox_checked icon-cool | |
| ico-checkbox_checked icon-notice | |
| ico-checkbox_checked icon-info | |
| ico-checkbox_checked icon-alert | |
| ico-checkbox_checked icon-dark | |
| ico-checkbox | |
| ico-checkbox icon-cool | |
| ico-checkbox icon-notice | |
| ico-checkbox icon-info | |
| ico-checkbox icon-alert | |
| ico-checkbox icon-dark | |
| ico-radio_checked | |
| ico-radio_checked icon-cool | |
| ico-radio_checked icon-notice | |
| ico-radio_checked icon-info | |
| ico-radio_checked icon-alert | |
| ico-radio_checked icon-dark | |
| ico-radio | |
| ico-radio icon-cool | |
| ico-radio icon-notice | |
| ico-radio icon-info | |
| ico-radio icon-alert | |
| ico-radio icon-dark | |
| ico-notice | |
| ico-notice icon-cool | |
| ico-notice icon-notice | |
| ico-notice icon-info | |
| ico-notice icon-alert | |
| ico-notice icon-dark | |
| ico-info | |
| ico-info icon-cool | |
| ico-info icon-notice | |
| ico-info icon-info | |
| ico-info icon-alert | |
| ico-info icon-dark | |
| ico-block | |
| ico-block icon-cool | |
| ico-block icon-notice | |
| ico-block icon-info | |
| ico-block icon-alert | |
| ico-block icon-dark | |
| ico-icon-deviantart | |
| ico-icon-deviantart icon-cool | |
| ico-icon-deviantart icon-notice | |
| ico-icon-deviantart icon-info | |
| ico-icon-deviantart icon-alert | |
| ico-icon-deviantart icon-dark | |
| ico-icon-medium | |
| ico-icon-medium icon-cool | |
| ico-icon-medium icon-notice | |
| ico-icon-medium icon-info | |
| ico-icon-medium icon-alert | |
| ico-icon-medium icon-dark | |
| ico-icon-slideshare | |
| ico-icon-slideshare icon-cool | |
| ico-icon-slideshare icon-notice | |
| ico-icon-slideshare icon-info | |
| ico-icon-slideshare icon-alert | |
| ico-icon-slideshare icon-dark | |
| ico-icon-snapchat-ghost | |
| ico-icon-snapchat-ghost icon-cool | |
| ico-icon-snapchat-ghost icon-notice | |
| ico-icon-snapchat-ghost icon-info | |
| ico-icon-snapchat-ghost icon-alert | |
| ico-icon-snapchat-ghost icon-dark | |
| ico-icon-yelp | |
| ico-icon-yelp icon-cool | |
| ico-icon-yelp icon-notice | |
| ico-icon-yelp icon-info | |
| ico-icon-yelp icon-alert | |
| ico-icon-yelp icon-dark | |
| ico-icon-vine | |
| ico-icon-vine icon-cool | |
| ico-icon-vine icon-notice | |
| ico-icon-vine icon-info | |
| ico-icon-vine icon-alert | |
| ico-icon-vine icon-dark | |
| ico-icon-vk | |
| ico-icon-vk icon-cool | |
| ico-icon-vk icon-notice | |
| ico-icon-vk icon-info | |
| ico-icon-vk icon-alert | |
| ico-icon-vk icon-dark | |
| ico-icon-search | |
| ico-icon-search icon-cool | |
| ico-icon-search icon-notice | |
| ico-icon-search icon-info | |
| ico-icon-search icon-alert | |
| ico-icon-search icon-dark | |
| ico-icon-envelope-o | |
| ico-icon-envelope-o icon-cool | |
| ico-icon-envelope-o icon-notice | |
| ico-icon-envelope-o icon-info | |
| ico-icon-envelope-o icon-alert | |
| ico-icon-envelope-o icon-dark | |
| ico-icon-close | |
| ico-icon-close icon-cool | |
| ico-icon-close icon-notice | |
| ico-icon-close icon-info | |
| ico-icon-close icon-alert | |
| ico-icon-close icon-dark | |
| ico-icon-angle-down | |
| ico-icon-angle-down icon-cool | |
| ico-icon-angle-down icon-notice | |
| ico-icon-angle-down icon-info | |
| ico-icon-angle-down icon-alert | |
| ico-icon-angle-down icon-dark | |
| ico-icon-folder-open | |
| ico-icon-folder-open icon-cool | |
| ico-icon-folder-open icon-notice | |
| ico-icon-folder-open icon-info | |
| ico-icon-folder-open icon-alert | |
| ico-icon-folder-open icon-dark | |
| ico-icon-twitter | |
| ico-icon-twitter icon-cool | |
| ico-icon-twitter icon-notice | |
| ico-icon-twitter icon-info | |
| ico-icon-twitter icon-alert | |
| ico-icon-twitter icon-dark | |
| ico-icon-facebook | |
| ico-icon-facebook icon-cool | |
| ico-icon-facebook icon-notice | |
| ico-icon-facebook icon-info | |
| ico-icon-facebook icon-alert | |
| ico-icon-facebook icon-dark | |
| ico-icon-github | |
| ico-icon-github icon-cool | |
| ico-icon-github icon-notice | |
| ico-icon-github icon-info | |
| ico-icon-github icon-alert | |
| ico-icon-github icon-dark | |
| ico-icon-bars | |
| ico-icon-bars icon-cool | |
| ico-icon-bars icon-notice | |
| ico-icon-bars icon-info | |
| ico-icon-bars icon-alert | |
| ico-icon-bars icon-dark | |
| ico-icon-google-plus | |
| ico-icon-google-plus icon-cool | |
| ico-icon-google-plus icon-notice | |
| ico-icon-google-plus icon-info | |
| ico-icon-google-plus icon-alert | |
| ico-icon-google-plus icon-dark | |
| ico-icon-linkedin | |
| ico-icon-linkedin icon-cool | |
| ico-icon-linkedin icon-notice | |
| ico-icon-linkedin icon-info | |
| ico-icon-linkedin icon-alert | |
| ico-icon-linkedin icon-dark | |
| ico-icon-quote-right | |
| ico-icon-quote-right icon-cool | |
| ico-icon-quote-right icon-notice | |
| ico-icon-quote-right icon-info | |
| ico-icon-quote-right icon-alert | |
| ico-icon-quote-right icon-dark | |
| ico-icon-mail-reply | |
| ico-icon-mail-reply icon-cool | |
| ico-icon-mail-reply icon-notice | |
| ico-icon-mail-reply icon-info | |
| ico-icon-mail-reply icon-alert | |
| ico-icon-mail-reply icon-dark | |
| ico-icon-youtube | |
| ico-icon-youtube icon-cool | |
| ico-icon-youtube icon-notice | |
| ico-icon-youtube icon-info | |
| ico-icon-youtube icon-alert | |
| ico-icon-youtube icon-dark | |
| ico-icon-dropbox | |
| ico-icon-dropbox icon-cool | |
| ico-icon-dropbox icon-notice | |
| ico-icon-dropbox icon-info | |
| ico-icon-dropbox icon-alert | |
| ico-icon-dropbox icon-dark | |
| ico-icon-instagram | |
| ico-icon-instagram icon-cool | |
| ico-icon-instagram icon-notice | |
| ico-icon-instagram icon-info | |
| ico-icon-instagram icon-alert | |
| ico-icon-instagram icon-dark | |
| ico-icon-flickr | |
| ico-icon-flickr icon-cool | |
| ico-icon-flickr icon-notice | |
| ico-icon-flickr icon-info | |
| ico-icon-flickr icon-alert | |
| ico-icon-flickr icon-dark | |
| ico-icon-tumblr | |
| ico-icon-tumblr icon-cool | |
| ico-icon-tumblr icon-notice | |
| ico-icon-tumblr icon-info | |
| ico-icon-tumblr icon-alert | |
| ico-icon-tumblr icon-dark | |
| ico-icon-dockerhub | |
| ico-icon-dockerhub icon-cool | |
| ico-icon-dockerhub icon-notice | |
| ico-icon-dockerhub icon-info | |
| ico-icon-dockerhub icon-alert | |
| ico-icon-dockerhub icon-dark | |
| ico-icon-dribbble | |
| ico-icon-dribbble icon-cool | |
| ico-icon-dribbble icon-notice | |
| ico-icon-dribbble icon-info | |
| ico-icon-dribbble icon-alert | |
| ico-icon-dribbble icon-dark | |
| ico-icon-skype | |
| ico-icon-skype icon-cool | |
| ico-icon-skype icon-notice | |
| ico-icon-skype icon-info | |
| ico-icon-skype icon-alert | |
| ico-icon-skype icon-dark | |
| ico-icon-foursquare | |
| ico-icon-foursquare icon-cool | |
| ico-icon-foursquare icon-notice | |
| ico-icon-foursquare icon-info | |
| ico-icon-foursquare icon-alert | |
| ico-icon-foursquare icon-dark | |
| ico-icon-wordpress | |
| ico-icon-wordpress icon-cool | |
| ico-icon-wordpress icon-notice | |
| ico-icon-wordpress icon-info | |
| ico-icon-wordpress icon-alert | |
| ico-icon-wordpress icon-dark | |
| ico-icon-stumbleupon | |
| ico-icon-stumbleupon icon-cool | |
| ico-icon-stumbleupon icon-notice | |
| ico-icon-stumbleupon icon-info | |
| ico-icon-stumbleupon icon-alert | |
| ico-icon-stumbleupon icon-dark | |
| ico-icon-digg | |
| ico-icon-digg icon-cool | |
| ico-icon-digg icon-notice | |
| ico-icon-digg icon-info | |
| ico-icon-digg icon-alert | |
| ico-icon-digg icon-dark | |
| ico-icon-spotify | |
| ico-icon-spotify icon-cool | |
| ico-icon-spotify icon-notice | |
| ico-icon-spotify icon-info | |
| ico-icon-spotify icon-alert | |
| ico-icon-spotify icon-dark | |
| ico-icon-soundcloud | |
| ico-icon-soundcloud icon-cool | |
| ico-icon-soundcloud icon-notice | |
| ico-icon-soundcloud icon-info | |
| ico-icon-soundcloud icon-alert | |
| ico-icon-soundcloud icon-dark | |
| ico-icon-codepen | |
| ico-icon-codepen icon-cool | |
| ico-icon-codepen icon-notice | |
| ico-icon-codepen icon-info | |
| ico-icon-codepen icon-alert | |
| ico-icon-codepen icon-dark | |
| ico-icon-twitch | |
| ico-icon-twitch icon-cool | |
| ico-icon-twitch icon-notice | |
| ico-icon-twitch icon-info | |
| ico-icon-twitch icon-alert | |
| ico-icon-twitch icon-dark | |
| ico-icon-meanpath | |
| ico-icon-meanpath icon-cool | |
| ico-icon-meanpath icon-notice | |
| ico-icon-meanpath icon-info | |
| ico-icon-meanpath icon-alert | |
| ico-icon-meanpath icon-dark | |
| ico-icon-pinterest-p | |
| ico-icon-pinterest-p icon-cool | |
| ico-icon-pinterest-p icon-notice | |
| ico-icon-pinterest-p icon-info | |
| ico-icon-pinterest-p icon-alert | |
| ico-icon-pinterest-p icon-dark | |
| ico-icon-periscope | |
| ico-icon-periscope icon-cool | |
| ico-icon-periscope icon-notice | |
| ico-icon-periscope icon-info | |
| ico-icon-periscope icon-alert | |
| ico-icon-periscope icon-dark | |
| ico-icon-get-pocket | |
| ico-icon-get-pocket icon-cool | |
| ico-icon-get-pocket icon-notice | |
| ico-icon-get-pocket icon-info | |
| ico-icon-get-pocket icon-alert | |
| ico-icon-get-pocket icon-dark | |
| ico-icon-vimeo | |
| ico-icon-vimeo icon-cool | |
| ico-icon-vimeo icon-notice | |
| ico-icon-vimeo icon-info | |
| ico-icon-vimeo icon-alert | |
| ico-icon-vimeo icon-dark | |
| ico-icon-reddit-alien | |
| ico-icon-reddit-alien icon-cool | |
| ico-icon-reddit-alien icon-notice | |
| ico-icon-reddit-alien icon-info | |
| ico-icon-reddit-alien icon-alert | |
| ico-icon-reddit-alien icon-dark | |
| ico-icon-hashtag | |
| ico-icon-hashtag icon-cool | |
| ico-icon-hashtag icon-notice | |
| ico-icon-hashtag icon-info | |
| ico-icon-hashtag icon-alert | |
| ico-icon-hashtag icon-dark | |
| ico-icon-chain | |
| ico-icon-chain icon-cool | |
| ico-icon-chain icon-notice | |
| ico-icon-chain icon-info | |
| ico-icon-chain icon-alert | |
| ico-icon-chain icon-dark | |
| ico-icon-thumb-tack | |
| ico-icon-thumb-tack icon-cool | |
| ico-icon-thumb-tack icon-notice | |
| ico-icon-thumb-tack icon-info | |
| ico-icon-thumb-tack icon-alert | |
| ico-icon-thumb-tack icon-dark | |
| ico-icon-arrow-left | |
| ico-icon-arrow-left icon-cool | |
| ico-icon-arrow-left icon-notice | |
| ico-icon-arrow-left icon-info | |
| ico-icon-arrow-left icon-alert | |
| ico-icon-arrow-left icon-dark | |
| ico-icon-arrow-right | |
| ico-icon-arrow-right icon-cool | |
| ico-icon-arrow-right icon-notice | |
| ico-icon-arrow-right icon-info | |
| ico-icon-arrow-right icon-alert | |
| ico-icon-arrow-right icon-dark | |
| ico-icon-play | |
| ico-icon-play icon-cool | |
| ico-icon-play icon-notice | |
| ico-icon-play icon-info | |
| ico-icon-play icon-alert | |
| ico-icon-play icon-dark | |
| ico-icon-pause | |
| ico-icon-pause icon-cool | |
| ico-icon-pause icon-notice | |
| ico-icon-pause icon-info | |
| ico-icon-pause icon-alert | |
| ico-icon-pause icon-dark | |
| ico-icon-phone | |
| ico-icon-phone icon-cool | |
| ico-icon-phone icon-notice | |
| ico-icon-phone icon-info | |
| ico-icon-phone icon-alert | |
| ico-icon-phone icon-dark | |
| ico-icon-email | |
| ico-icon-email icon-cool | |
| ico-icon-email icon-notice | |
| ico-icon-email icon-info | |
| ico-icon-email icon-alert | |
| ico-icon-email icon-dark | |
| ico-icon-rss | |
| ico-icon-rss icon-cool | |
| ico-icon-rss icon-notice | |
| ico-icon-rss icon-info | |
| ico-icon-rss icon-alert | |
| ico-icon-rss icon-dark | |
| ico-icon-amazon | |
| ico-icon-amazon icon-cool | |
| ico-icon-amazon icon-notice | |
| ico-icon-amazon icon-info | |
| ico-icon-amazon icon-alert | |
| ico-icon-amazon icon-dark |