How to Add Custom Icons in GenerateBlocks

Adding custom icons to your GenerateBlocks layout can really elevate the design and make it stand out. Here’s a step-by-step guide on how to replace the standard icons in GenerateBlocks with custom SVG icons:

Step 1: Find or Create Your SVG Icon

1. Choose Your Icon Source:
   • You can find free SVG icons on websites like Phosphor Icons or use design tools like Adobe XD or Figma to create or download your icons.
2. Copy the SVG Code:
   • On websites like Phosphor Icons, simply select the icon you want (e.g., an airplane in flight), and click on the Copy SVG button. This copies the SVG code to your clipboard.
   • In Adobe XD or Figma, you can right-click on your icon and select Copy SVG Code.

Step 2: Add the Icon in GenerateBlocks

1. Open Your WordPress Editor:
   • Navigate to the page or post where you want to add the custom icon using GenerateBlocks.
2. Select the Headline Block:
   • Find the Headline block in your layout where you want to add or replace the icon.
3. Clear the Current Icon:
   • In the block settings on the right-hand sidebar, you’ll see the option to add an icon. If there’s an existing icon, click Clear to remove it.
4. Paste the SVG Code:
   • In the empty icon box, paste the SVG code you copied earlier. Your new custom icon will immediately appear in the layout.

Step 3: Customize the Icon

1. Adjust the Icon’s Appearance:
   • Depending on the source of your SVG, you may need to adjust the color or size. If the icon color isn’t changing as expected, you might need to manually adjust the SVG code by specifying the fill attribute with your desired color.
2. Repeat for Other Icons:
   • You can repeat this process for other icons in your design, whether they are from Phosphor Icons, Adobe XD, Figma, or another source.

Example Workflow

1. Find Icon on Phosphor Icons: Select Airplane in Flight, copy the SVG.
2. Replace Icon in GenerateBlocks: Clear the old icon in your Headline block and paste the new SVG code.
3. Customize: Adjust the icon size or color if needed using the block settings.

Final Thoughts

By following this method, you open up endless possibilities for customizing your website’s icons beyond the default set that comes with GenerateBlocks. Whether you’re pulling from a large icon library online or designing your own in a tool like Adobe XD, this process gives you the flexibility to create exactly what you need.

Enjoy adding those custom touches to your design!