Documentation

Everything you need to know about creating and managing AI-generated icons with Iconly.

Overview

Iconly is an AI-powered icon generator that lets you create professional, custom icons in seconds. Simply describe what you need, choose a style, and our AI will generate beautiful icons for your projects.

AI-Powered

Generate any icon you can describe using advanced AI models.

Customizable

Adjust colors, line thickness, and more to match your brand.

CDN Delivery

Deploy icons instantly with our global CDN.

Quick Start

Get started creating icons in three simple steps:

1

Describe Your Icon

Enter a description of the icon you want. Be specific but concise. Examples: "shopping cart", "user profile with gear", "rocket launching".

2

Choose Style & Color

Select from Line Art, Solid Glyph, Outline, or Pixel Art styles. Pick a color from the palette or enter a custom hex code.

3

Generate & Save

Click generate and wait a few seconds. Save the icon to your library, download as PNG, or continue editing.

Tip: Use simple, descriptive phrases for best results. The AI works best with clear, concrete concepts rather than abstract ideas.

Account & Tokens

Iconly uses a token-based system for icon generation. Each action costs a certain number of tokens:

  • Icon Generation: 3-8 tokens (varies by AI model)
  • Icon Refinement: 2x the generation cost
  • Iconify (Image to Icon): 2x the generation cost
  • Editing (recolor, thickness, crop): Free

New accounts start with 50 free tokens. You can purchase additional token packs or subscribe to a monthly plan for more tokens.

Pro Tip: Editing operations like recoloring, adjusting thickness, and cropping are completely free and don't use any tokens!

Generating Icons

To generate an icon, navigate to the Create page and enter a description in the text area. Here are some tips for writing effective prompts:

Writing Good Prompts

  • Be specific: "coffee cup with steam" works better than just "coffee"
  • Keep it simple: Focus on one main object or concept
  • Use common objects: The AI excels at recognizable items and symbols
  • Describe the action: "rocket launching" vs "rocket" can give different results

Example Prompts

hot coffee cup shopping cart user profile heart with pulse lightning bolt open book cloud with arrow padlock security

Icon Styles

Iconly offers four distinct icon styles to match your design needs:

Line Art

Clean, minimalist icons with consistent stroke weights. Perfect for modern interfaces and apps.

Solid Glyph

Filled icons with solid shapes. Great for bold, high-contrast designs and small sizes.

Outline

Icons with outlined shapes and subtle details. Ideal for elegant, professional looks.

Pixel Art

Retro-style pixelated icons. Perfect for gaming interfaces or nostalgic designs.

Select your preferred style from the dropdown menu before generating. You can generate the same concept in different styles to compare results.

Colors & Recoloring

You can set the color before generating or recolor icons after they're created.

Setting Color Before Generation

Click the color circle in the input bar to open the color picker. Choose from the preset palette or enter a custom hex code (e.g., #3B82F6).

Recoloring After Generation

Click the recolor button (paint drop icon) in the action bar to change the color of your generated icon. This operation is free and doesn't use tokens.

Note: Recoloring works best on icons with clear, solid colors. Complex gradients or multi-colored icons may not recolor as expected.

Line Thickness

Adjust the line thickness of your icons to match your design system. This is especially useful for Line Art and Outline styles.

1

Open Thickness Control

Click the thickness button (three horizontal lines icon) in the action bar.

2

Adjust the Slider

Move the slider left (thinner, -10) or right (thicker, +10) to adjust line weight.

3

Apply Changes

Click "Apply Thickness" to update the icon. This operation is free.

Crop & Recenter

The Crop & Recenter feature removes empty space from the edges of your icon and centers the content on the canvas. This is useful when icons are generated with excessive padding.

  • Adjust the crop percentage (0-50%) using the slider
  • The crop is applied equally from all edges
  • Content is automatically recentered after cropping
  • This operation is free and doesn't use tokens

Warning: Be careful with high crop percentages as you may accidentally cut off parts of your icon.

Icon Refinement

Icon Refinement allows you to iterate on a generated icon using AI. This feature is available on Pro and Max plans.

How It Works

  1. Generate an icon that's close to what you want
  2. Go to your Library and click on the icon to open the editing view
  3. Enter refinement instructions in the text area (e.g., "make it more rounded", "add a shadow")
  4. Click "Generate Refinement" to create an improved version

Note: Refinement uses 2x the normal token cost because the AI analyzes your existing icon as reference.

Iconify (Image to Icon)

Iconify converts any image into an icon. Upload a photo, logo, or sketch and the AI will transform it into a clean icon. This feature is available on Pro and Max plans.

1

Click the Iconify Button

Click the image icon button in the input bar to open the file picker.

2

Select an Image

Choose an image file from your device. Most image formats are supported.

3

Add Optional Description

You can add a description to guide the AI, or leave it blank to let the AI interpret the image.

4

Generate

Click generate to create an icon based on your image. Uses 2x tokens.

Attach for Refinement

The Attach feature lets you use your current generated icon as a reference when creating new icons. This is useful for maintaining consistency or iterating on a design. Available on Pro and Max plans.

How to Use

  1. Generate an icon you want to use as reference
  2. Click the paperclip/attach button in the action bar
  3. You'll see an indicator showing the icon is attached
  4. Enter a new description and generate
  5. The AI will use your attached icon as reference

To remove the attachment, click the X on the attachment indicator.

Your Icon Library

The Library is where all your saved icons are stored. From here you can:

  • View all icons: Browse your complete collection
  • Search & filter: Find icons by name or style
  • Edit icons: Click an icon to open editing tools
  • Rename icons: Click the edit icon next to the name
  • Download: Export icons as PNG files
  • Delete: Remove icons you no longer need
  • Refine: Improve icons with AI (Pro/Max)

Tip: Give your icons descriptive names to make them easier to find later and to generate meaningful CSS class names.

CDN Integration

Deploy your icon library to any website with a single script tag. Your icons are served from our global CDN for fast loading worldwide.

Setup

1

Get Your CDN Script

Click "Get CDN Script" in your Library to copy your personalized script tag.

2

Add to Your Website

Paste the script tag in your HTML <head> section.

3

Use Your Icons

Add icons using the <i> element with the appropriate class.

Usage Example

<!-- Add to your <head> --> <script src="https://cdn.iconly.ai/your-id/iconly.js"></script> <!-- Use icons in your HTML --> <i class="ci ci-your-icon-name ci-md"></i>

Size Classes

  • ci-sm - Small
  • ci-md - Medium (default)
  • ci-lg - Large
  • ci-xl - Extra Large
  • ci-2xl - 2X Large
  • ci-cs - Custom Size (define your own CSS)

Public Icon Library

Browse and use hundreds of free, pre-made AI-generated icons from our public library. These icons are available to everyone and can be used via CDN without an account.

Using Public Icons

<!-- Add the public library script --> <script src="https://cdn.iconly.ai/iconly/public/iconly.js"></script> <!-- Use public icons --> <i class="ci-line ci-coffee ci-md"></i> <i class="ci-glyph ci-heart ci-lg"></i>

Visit the Icon Library to browse all available public icons.

Pricing & Plans

Trial (Free)

50 tokens (one-time), all generation features, CDN delivery, PNG downloads.

Pro ($15/mo)

2,500 tokens/month, icon refinement, Iconify, Attach feature, priority support.

Max ($30/mo)

6,000 tokens/month, all Pro features, early access to new features.

You can also purchase token packs that never expire. Visit the Billing page for more details.

Get Help

Need assistance? We're here to help!

When contacting support, please include your account email and a description of the issue you're experiencing. Screenshots are always helpful!