Ollie Block Academy

Completing Our Block

Changing the colors of the SVG icon

WordPress provides native icon coloring through the block registration’s icon object format. Use foreground and background properties to apply colors without modifying the SVG source code.

Transform the icon property from a direct component reference to an object with source and color properties. This enables WordPress’s built-in theming system to control icon appearance.

Strategic icon coloring helps users identify custom blocks, especially when blocks are scattered across different categories rather than grouped in client-specific sections.

Back to: Ollie Block Academy > Completing Our Block