Everything you need to know about creating and managing AI-generated icons with Iconly.
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.
Generate any icon you can describe using advanced AI models.
Adjust colors, line thickness, and more to match your brand.
Deploy icons instantly with our global CDN.
Get started creating icons in three simple steps:
Enter a description of the icon you want. Be specific but concise. Examples: "shopping cart", "user profile with gear", "rocket launching".
Select from Line Art, Solid Glyph, Outline, or Pixel Art styles. Pick a color from the palette or enter a custom hex code.
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.
Iconly uses a token-based system for icon generation. Each action costs a certain number of tokens:
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!
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:
hot coffee cup
shopping cart
user profile
heart with pulse
lightning bolt
open book
cloud with arrow
padlock security
Iconly offers four distinct icon styles to match your design needs:
Clean, minimalist icons with consistent stroke weights. Perfect for modern interfaces and apps.
Filled icons with solid shapes. Great for bold, high-contrast designs and small sizes.
Icons with outlined shapes and subtle details. Ideal for elegant, professional looks.
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.
You can set the color before generating or recolor icons after they're created.
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).
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.
Adjust the line thickness of your icons to match your design system. This is especially useful for Line Art and Outline styles.
Click the thickness button (three horizontal lines icon) in the action bar.
Move the slider left (thinner, -10) or right (thicker, +10) to adjust line weight.
Click "Apply Thickness" to update the icon. This operation is free.
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.
Warning: Be careful with high crop percentages as you may accidentally cut off parts of your icon.
Icon Refinement allows you to iterate on a generated icon using AI. This feature is available on Pro and Max plans.
Note: Refinement uses 2x the normal token cost because the AI analyzes your existing icon as reference.
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.
Click the image icon button in the input bar to open the file picker.
Choose an image file from your device. Most image formats are supported.
You can add a description to guide the AI, or leave it blank to let the AI interpret the image.
Click generate to create an icon based on your image. Uses 2x tokens.
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.
To remove the attachment, click the X on the attachment indicator.
The Library is where all your saved icons are stored. From here you can:
Tip: Give your icons descriptive names to make them easier to find later and to generate meaningful CSS class names.
Deploy your icon library to any website with a single script tag. Your icons are served from our global CDN for fast loading worldwide.
Click "Get CDN Script" in your Library to copy your personalized script tag.
Paste the script tag in your HTML <head> section.
Add icons using the <i> element with the appropriate class.
<!-- 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>
ci-sm - Smallci-md - Medium (default)ci-lg - Largeci-xl - Extra Largeci-2xl - 2X Largeci-cs - Custom Size (define your own CSS)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.
<!-- 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.
50 tokens (one-time), all generation features, CDN delivery, PNG downloads.
2,500 tokens/month, icon refinement, Iconify, Attach feature, priority support.
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.
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!