Create custom icons for your knowledge base categories using ChatGPT, Grok, or Claude, then upload them to Echo Knowledge Base. You can also use existing images instead of generating new ones. Echo Knowledge Base supports both font icons and uploaded image icons for categories.

This guide covers choosing a style, creating matching icons, preparing the image files, and adding them to your categories.

Recommended Icon Settings

Use these settings as a starting point for your icon set:

Setting	Recommendation
Final dimensions	512 × 512 pixels. Create a square image and resize or export it at this size before uploading.
Upload format	PNG with a transparent background.
Visual style	Simple flat illustrations or outline icons. Choose one style for the entire set.
Composition	Center each symbol with similar spacing around its edges.
Text	Keep category names outside the image. Avoid letters, labels, and numbers inside icons.
Files	Save each category icon as a separate image, rather than combining the set into one picture.

The 512 × 512-pixel size is a recommended target for this workflow, not a guarantee that an AI tool will generate that exact size. PNG supports transparent backgrounds; JPEG does not.

Step 1: Choose Your AI Tool

Option A: ChatGPT

Open ChatGPT and sign in. Start a conversation and ask it to create an image, or select Images. You can upload an existing icon as a reference and request changes through follow-up prompts. ChatGPT also supports requests for transparent backgrounds.

Image generation is available on Free and paid plans. These instructions do not require selecting a specific model or using a separate DALL·E workflow. See the ChatGPT image documentation for more information.

Option B: Grok

Open Grok and sign in. Use Imagine or ask Grok to generate an image in a conversation. Grok supports creating images from written prompts or reference images and editing the results through follow-up instructions. Learn more about Grok.

Request a square image and check its background and file format before uploading. Use the preparation steps below to resize the image or remove an unwanted background.

Option C: Claude

Open Claude and start a conversation. Claude does not generate photos or illustrations in the same way as dedicated image-generation tools, but it can create code-based visuals using SVG, a vector image format. It can also analyze uploaded images and revise its visuals through follow-up instructions. Learn more about Claude’s visual capabilities.

For this guide, use Claude to create simple flat or outline icons as standalone SVG files. Keep the SVG files as your editable originals, then export them as transparent PNG files before uploading.

Choose one tool for your icon set and keep the project in the same conversation.

Step 2: Create a Reference Icon

Start with one category and refine its icon before creating the rest. Use this approved image as the visual reference for your set.

Choose a simple symbol for each category. For example, use a rocket for Getting Started, a user silhouette for Account, a payment card for Billing, and a wrench for Troubleshooting.

You can also start with an existing icon that you have permission to use.

Example Prompt for ChatGPT or Grok

Replace the category, symbol, and colors with your preferences.

Create one website category icon for “Getting Started,”
represented by a simple rocket.

Design:
- Flat geometric shapes with softly rounded corners.
- Dark blue (#234B73) and light blue (#6BB9F0).
- A centered symbol with generous, even space around it.
- Minimal detail so the icon remains recognizable at a small size.
- No gradients, shadows, lettering, numbers, or labels.

Output:
- One icon in a square image.
- A transparent background, not a white background or a drawn
  checkerboard pattern.
- No surrounding card, frame, or additional icons.
- The image will be prepared as a 512 × 512-pixel PNG for website use.

Example Prompt for Claude

Use this version to request an SVG icon rather than a webpage or application component.

Create one standalone SVG icon for the knowledge base category
“Getting Started,” represented by a simple rocket.

Design:
- Flat geometric shapes with softly rounded corners.
- Dark blue (#234B73) and light blue (#6BB9F0).
- A centered symbol with generous, even space around it.
- Minimal detail so the icon remains recognizable at a small size.
- No gradients, shadows, lettering, numbers, or labels.

File requirements:
- Create an SVG file, not a webpage or React component.
- Use a square viewBox and set width and height to 512.
- Keep the background transparent, with no background rectangle.
- Use only vector shapes and paths.
- Do not include scripts, external resources, or embedded images.
- Provide one icon only, not a grid or collage.

Show a preview and provide the standalone SVG file.

Refine the Reference

Review the result before continuing. Check the colors, simplicity, symbol size, and spacing. Request specific adjustments rather than asking for a completely different design.

For example:

Make the rocket simpler, round its corners slightly, and increase its size within the square without changing the colors.

Once you are satisfied, save the reference image. For Claude, keep the SVG file as well.

Step 3: Create the Remaining Category Icons

Use the approved reference to create the rest of your set. Generate one category at a time so you can review each result and keep the files separate.

Reusable Prompt for ChatGPT or Grok

Upload your reference icon and replace the category and symbol below.

Use the attached icon as the visual reference for a new
knowledge base category icon.

Category: [CATEGORY NAME]
Symbol: [SYMBOL OR SHORT DESCRIPTION]

Match the reference icon’s:
- Color palette.
- Flat or outline drawing style.
- Line thickness, where applicable.
- Corner shapes and level of detail.
- Visual size and spacing within the square.

Create one centered icon in a square image.
Use a transparent background.
Do not include text, labels, a background card, or other icons.
Do not combine multiple designs into a grid or collage.

The image will be prepared as a 512 × 512-pixel PNG for website use.

Reusable Prompt for Claude

Continue in the same conversation and refer to your approved SVG.

Create the next knowledge base category icon using the approved
reference SVG as the style guide.

Category: [CATEGORY NAME]
Symbol: [SYMBOL OR SHORT DESCRIPTION]

Keep the same color palette, drawing style, corner shapes,
level of detail, and line thickness where applicable.
Match the reference icon’s visual size and spacing.

Provide one standalone SVG file:
- Use a square viewBox and set width and height to 512.
- Keep the background transparent.
- Use only vector shapes and paths.
- Do not include scripts, external resources, or embedded images.
- Do not include text, a background card, or additional icons.

Show a preview and provide the SVG file.

Check Consistency

Compare each new icon with the reference before continuing. Look for similar colors, detail, spacing, and overall visual size.

Request specific corrections when something differs:

Make the wrench less detailed, use the reference icon’s darker blue, and increase the symbol’s size while keeping the same spacing around the edges.

Review the results yourself rather than assuming that using a reference will make every icon match perfectly.

Step 4: Prepare the Image Files

Use PNG as the final upload format for this guide. Keep the original generated images and any SVG files for future edits.

Resize Images from ChatGPT or Grok

Check the dimensions of each saved image. Resize larger square images to 512 × 512 pixels in an image editor. WordPress also provides image-scaling controls in its media editor.

For a non-square image, adjust the canvas or crop carefully rather than stretching the symbol. Preserve similar spacing across the set.

Export Claude’s SVG Icons as PNG

Open each SVG in a vector editor such as Inkscape. Open the export panel, select Page as the export area, and set the output dimensions to 512 × 512 pixels. Keep the page background transparent and export as PNG. Inkscape provides controls for the export area, pixel dimensions, and background transparency. See Inkscape’s PNG export guide for details.

Use the same square page size and export settings for every icon to preserve consistent spacing.

Check the Background

Preview each finished PNG against both a light and a dark background. Confirm that the space around the symbol is transparent, with no visible rectangle or checkerboard pattern.

When an image has an unwanted background, remove it in an image editor before exporting again. Simply saving a JPEG as PNG does not make the existing background transparent; PNG supports transparency, but the background pixels still need to be removed.

Review and Save the Final Files

Compare the icons at the size they will appear on your website. Check that the symbols remain clear, have sufficient contrast, and look similar in size.

Use descriptive filenames such as getting-started.png, account.png, and billing.png. Optimize large files before uploading, then check that the optimized versions retain their quality and transparency.

Step 5: Add the Icons to Echo Knowledge Base

1. In the WordPress admin area, open Knowledge Base → Categories and edit the category you want to update.
2. Check whether category icons are enabled. If a message indicates that icons are disabled, follow its settings link to enable them.
3. In the category’s icon settings, upload or select the corresponding PNG image.
4. Click Update to save the category.

Repeat for the remaining categories, then check the icons on your knowledge base main page. For more details, see Set Image and Font Icons for Categories.

Troubleshooting

Issue	What to check
The AI generated a grid of icons	Repeat the request with “Create one icon only, not a grid or collage.”
The icons do not match	Reattach the reference and identify the difference: colors, line thickness, detail, or spacing.
An icon looks smaller than the others	Compare the space around the symbol, not just the image dimensions. Ask for a larger symbol within the same square.
A background rectangle or checkerboard is visible	Inspect the file’s transparency and remove any unwanted background before exporting again.
Claude produced a webpage or application component	Ask for one standalone SVG file containing only the icon.
The icon looks blurry or too detailed	Simplify the design and check it at the size used on your website.
The icon is not displayed	Confirm that category icons are enabled, the correct image is selected, and the category changes were saved.

Keep your reference image, prompts, original files, and finished PNGs together so you can reuse the same design instructions when adding new categories.