Canonical: https://instain.ru/en/articles/an-svg-icon-in-recraft-from-generation-to-a-24-pixel-check/ Language: en A practical guide # An SVG icon in Recraft: from generation to a 24-pixel check A watering can looks tidy on a large canvas, but its handle disappears in a menu. Here is how to create a vector icon in Recraft and prepare it for the size people will actually use. ![A flat silhouette of a green watering can with anchor points along its vector outline on a light sheet.](https://instain.ru/assets/images/article-recraft-svg-ikonka-proverka-malogo-razmera-cover-1e03197a7904-1200.webp) An editorial illustration of how a vector outline works; not the Recraft interface or a Recraft result. ## Start with the size and purpose Suppose a plant-care section needs a small green watering can. It will occupy 24 × 24 pixels in the menu and 48 × 48 on a tip card. This is a teaching exercise, not a demonstration of Recraft test results. The criterion is simple: someone should recognize the object without a label. Decide which details are essential before generating anything. Our watering can needs a body, an extended spout on the right, and a handle on the left with a clear opening. Highlights, decoration on the side, and separate drops of water do not help with this task. If the spout disappears when the icon shrinks, all that remains is a green bucket. ## Choose vector generation specifically Open a project in Recraft Studio and go to Create. Set Generation type to Vector: the current documentation describes this as a separate generation type from Image. Choose a suitable vector model from those available in your account and a square aspect ratio if it fits your layout. A flat-color picture is not necessarily a vector. Image mode can produce a similar-looking illustration in a different source format. Recraft's documentation also warns that reference images are unavailable when generating with the Vector type. Build this exercise around a text prompt, and treat work with an existing raster image as a separate Vectorize operation. ## Describe a shape you can check Try this prompt for a first version: “A simple flat icon of a garden watering can, side view. A wide green body, a short, clearly visible spout pointing right, and a large handle on the left with an open gap. One dark-green fill, with no gradients, shadows, lettering, patterns, or drops of water. Show the whole object in a square composition, with empty space around it. The icon should be legible at a small size.” The final sentence expresses your intention; it does not check the result for you. Generate a few variations and first choose the clearest silhouette. An elaborately decorated watering can may look more interesting on the canvas while doing a worse job as a navigation symbol. ## Remove clutter and fix a visible fault Look at where the spout joins the body and whether the handle has merged into the side. An isolated green mark at the edge may be an unwanted shape, while a narrow light gap may be the only thing that identifies the handle. These are the places to fix first. Recraft includes a Vector Editor. According to the documentation, double-clicking a vector opens its shapes for editing; double-clicking the required shape then lets you work with points and curves. You can move elements and change fill colors. For this exercise, widening an overly narrow gap and removing a stray detail makes more sense than adding complexity to the whole drawing again. Save a version before editing. If simplifying it removes its recognizable shape, you can easily go back. ## Compare 24 and 48 pixels alongside the large version Place copies of the icon in the layout at both target sizes and view it at the normal 100% zoom level. Enlarging a small symbol to fill half the screen defeats this check: visitors will not see it that way. At 24 pixels, check three things: whether the spout is distinct, whether the opening in the handle remains visible, and whether there is enough space around the body. Then look at 48 pixels. If the larger version is clear but the smaller one loses its shape, changing the file format alone will not solve it. Simplify the outline, widen an important gap, or prepare a separate version for the menu. Check the symbol against the background it will sit on. Dark green on white and the same green on a dark panel do not have the same legibility. Clean SVG edges cannot compensate for weak contrast or a cramped composition. ![Two flat watering-can icons: one cluttered with detail and one simplified, with an open handle.](https://instain.ru/assets/images/article-recraft-svg-ikonka-proverka-malogo-razmera-illustration-1-9028950f859f-1200.webp) A diagram of simplifying an icon for a small size. An editorial example, not results from testing Recraft. ## Export the SVG and open the downloaded file Once the shape works, choose SVG export. Check the downloaded file in the editor you will use for the layout: the whole object should be visible, without an unexpectedly large margin, and its colors and openings should be intact. Repeat the 24- and 48-pixel check after placing it in the actual interface component. Recraft's documentation gives an important condition for exporting an entire frame: every element in it must be a vector. If a raster image remains inside, it needs vectorizing first. So do not add PNG decorations to the prepared icon simply to export the final composition as SVG. ## If a suitable watering can already exists as PNG Take a different route: place the raster image on the canvas, select it, and choose Vectorize in the context panel. The documentation describes reducing the number of colors with Color Reduction and adjusting the palette afterward. This converts an existing picture; it is separate from generating a native vector from a text prompt. Start with a clear, flat image. Recraft warns about artifacts when vectorizing photographs, 3D renders, and heavily textured illustrations. After conversion, check the spout, handle, and small size again. Merely changing a PNG file's extension to SVG does not perform that conversion. ## Keep the working source and check the plan terms Keep the project, final SVG, prompt, and a record of the target sizes together. Label a simplified menu version separately if you make one. That will help you avoid replacing a legible small icon with a more elaborate large-canvas version during a later edit. Before using it in a commercial project, open Recraft's current pricing page. The service currently states that free-plan results are public and not licensed for commercial use; different terms are stated for images created during a paid subscription. Downloading an SVG successfully does not establish suitable usage rights. Check model availability, credit consumption, and account terms before starting the task. ## Sources and documentation - [Recraft Studio: generation types and Create settings](https://www.recraft.ai/docs/recraft-studio/image-generation/how-to-generate-an-image) - [Recraft Vector Editor: shapes, points, reference limitations, and frame export](https://www.recraft.ai/docs/recraft-studio/image-editing/vector-editor) - [Recraft: raster image vectorization and limitations](https://www.recraft.ai/docs/recraft-studio/format-conversions-and-scaling/vectorizing) - [Recraft: generating SVG from a text description](https://www.recraft.ai/ai-vector-generator) - [Recraft: current plans, public visibility, and rights to results](https://www.recraft.ai/pricing) [All articles ](https://instain.ru/en/articles/) ## Tools mentioned in this article Stars are directory scores, not user reviews or traffic statistics. [How to interpret the scores](https://instain.ru/en/methodology/) Images ### [Recraft](https://instain.ru/en/ai/recraft/) Raster and vector graphics for design tasks 4.48 / 5 service