How to Design Vector-Aligned App Icons in GIMP

Designing vector-aligned app icon graphics in GIMP involves setting up a precise pixel grid, utilizing the Paths tool for vector creation, snapping nodes to ensure clean edges, and applying consistent styling before exporting at multiple resolutions. This guide walks you through setting up your workspace, drawing scalable vector shapes, adding modern lighting effects, and exporting crisp assets for any platform.

Step 1: Set Up the Canvas and Pixel Grid

App icons require exact pixel alignment to avoid blurry edges when scaled down.

  1. Create a new image by going to File > New.
  2. Set the canvas size to 1024 × 1024 pixels (standard master size for both iOS and Android) with a resolution of 300 ppi.
  3. Under Advanced Options, set Color space to RGB and Fill with to Transparency.
  4. Configure the grid by navigating to Image > Configure Grid.
  5. Set the grid spacing to 8 × 8 pixels or 16 × 16 pixels to match standard UI layout guidelines.
  6. Enable snapping by checking both View > Show Grid and View > Snap to Grid.

Step 2: Create the Icon Base Using the Paths Tool

GIMP’s Paths tool allows you to create vector curves that snap to your grid for clean geometry.

  1. Select the Paths Tool (B on your keyboard).
  2. For rounded rectangles (squircles), you can use the Rectangle Select Tool, check Rounded corners in the Tool Options, set the desired radius (e.g., 220px for a 1024px canvas), and click Select > To Path.
  3. For custom shapes, click on grid intersections to place vector nodes. Click and drag nodes to create smooth Bézier curves.
  4. Open the Paths Dialog (Windows > Dockable Dialogs > Paths) to manage and rename your vector components.

Step 3: Fill and Style the Vector Elements

Once your paths are created, convert them into clean visual layers.

  1. In the Paths Dialog, right-click your active path and choose Path to Selection.
  2. Create a new transparent layer in the Layers Dialog and name it according to the element (e.g., "Base Background").
  3. Select the Gradient Tool (G) and apply a subtle linear or radial gradient to create modern depth.
  4. Deselect the area using Select > None (Ctrl + Shift + A).

Step 4: Add Inner Shadows, Highlights, and Details

Adding lighting elements gives the icon dimension while maintaining vector crispness.

  1. Top Highlight: Duplicate the base path, scale it down slightly, fill it with white, and reduce the layer opacity to 10–20%.
  2. Inner Border: Right-click your path, select Stroke Path, choose Solid color with a width of 2 to 4 pixels, and set the layer mode to Overlay or Soft Light.
  3. Drop Shadow: Right-click the base layer, select Alpha to Selection, create a new layer beneath it, fill with black, and apply Filters > Blur > Gaussian Blur to create depth.

Step 5: Check Vector Alignment and Pixel Snapping

Before finalizing, ensure the edges do not blur across sub-pixels.

  1. Zoom in to 800% or higher on critical edges and corners.
  2. If an edge looks soft or feathered where it should be sharp, re-align the corresponding vector nodes using the Paths Tool so they lock precisely to whole pixel coordinates.
  3. Keep complex graphic elements centered within a safe zone (the inner 80% of the canvas) to prevent clipping across different OS icon masks.

Step 6: Export the Icon Assets

Export a master copy, then generate the required platform sizes.

  1. Save the editable master file as an .XCF project via File > Save As.
  2. Go to File > Export As and save a master PNG at 1024 × 1024 pixels.
  3. For smaller target resolutions (512×512, 192×192, 180×180, 48×48):
    • Go to Image > Scale Image.
    • Set the target dimensions.
    • Set Interpolation to NoHalo or LoHalo for the sharpest downsampling.
    • Export each version as an optimized PNG file.