Figma Images and Icons

Images and icons make designs feel real and complete. Figma lets you import photos, use image fills, place icons from plugins, and export assets for developers — all without leaving the browser.

Importing Images into Figma

Three ways to bring an image into Figma:

• Drag and drop – Open a folder on your computer and drag an image file directly onto the Figma canvas.
• Menu import – Click the Figma logo → File → Place Image → select a file.
• Copy-paste – Copy an image from any app and press Ctrl + V (Cmd + V) inside Figma.

Figma accepts JPG, PNG, GIF, SVG, WEBP, and TIFF file formats.

Image as a Fill vs. Image as a Layer

When you drag an image onto the canvas, it becomes an image layer — a rectangle with the image as its fill. You can also apply an image as a fill to any existing shape.

Image Placement Diagram

  Method 1: Drag image to canvas
  Canvas --> [Image Layer: rectangle with image fill]

  Method 2: Image fill on existing shape
  Circle shape --> Fill --> Image --> [Circle with photo inside]

  Result 2 is great for round profile pictures:
  +-----+
  | (o) |   <-- Circle clipped profile photo
  +-----+

Cropping and Repositioning Images

Double-click an image layer to enter crop mode. A blue outline appears showing the crop boundary. Drag the image inside the boundary to reposition it, or drag the boundary handles to crop from any side. Press Enter or Escape to exit crop mode.

Image Fit Modes

Select an image layer, then look at the Design Panel under Fill to change how the image fits inside its container.

Creating an Image Mask

A mask hides parts of an image using the shape of another object. Place the masking shape on top of the image. Select both. Right-click and choose Use as Mask (or press Ctrl + Alt + M).

Mask Diagram

  Before masking:          After masking:
  +----------+             +---------+
  |  [Photo] |    +        |  /~~~\  |  <-- Only the star-shaped
  +----------+   [Star]    | | img | |      area of photo shows
                            | \___/  |
                            +---------+

Any shape works as a mask — circles, custom polygons, or even text characters.

Adjusting Image Exposure and Color

Select an image layer. In the Design Panel, scroll to the Fill section and click the image thumbnail. An image adjustment panel appears with sliders for:

• Exposure – Makes the image brighter or darker.
• Contrast – Increases or decreases the difference between light and dark areas.
• Saturation – Increases or reduces color intensity. Set to -100 for black and white.
• Temperature – Shifts the image toward warm (orange) or cool (blue) tones.
• Highlights / Shadows – Fine-tunes the brightest and darkest areas separately.

Working with Icons

Icons are small symbols that represent actions or concepts. A magnifier represents search. A house represents home. Icons make interfaces intuitive without requiring text labels.

Icon Formats in Figma

• SVG (recommended) – Scalable Vector Graphic. Stays crisp at any size. Fully editable inside Figma (you can change color, stroke width, etc.).
• PNG – Fixed resolution. Cannot be edited as vector. Use only when SVG is not available.

Importing SVG Icons

Drag an SVG file from your computer onto the Figma canvas. Figma converts it into editable vector paths. You can then change its fill color, stroke, and size without any quality loss.

Using the Iconify Plugin for Icons

Iconify is a free Figma plugin with over 100,000 icons from popular libraries like Material Icons, Font Awesome, and Heroicons.

1. In Figma, go to the Figma menu → Plugins → Browse Plugins in Community.
2. Search for Iconify and install it.
3. Open the plugin from the Plugins menu.
4. Search for an icon by name, for example "cart" or "bell".
5. Click an icon to insert it onto your canvas as an editable SVG.

Icon Size Guide

  USE CASE              RECOMMENDED SIZE
  Navigation bar icon   24 × 24 px
  Button icon           16 × 16 px
  Large feature icon    48 × 48 px
  Illustration icon     64 × 64 px or larger

Changing Icon Color

After importing an SVG icon into Figma:

1. Select the icon on the canvas.
2. Press Enter to enter the group or frame inside the icon.
3. Select the path you want to recolor.
4. Change the fill color in the Design Panel.

For icons made of a single path, simply select the icon and change the Fill color directly.

Exporting Images and Icons

Developers need image and icon files for their code. Figma exports assets directly.

1. Select the layer or frame you want to export.
2. In the Design Panel, scroll to the bottom and click + Export.
3. Choose a format: PNG, JPG, SVG, or PDF.
4. Set the scale: 1x, 2x, or 3x (for high-resolution screens).
5. Click Export to download the file.

Export Scale Guide

  SCALE     FILE SIZE     USE CASE
  1x        Small         Standard screens
  2x        Medium        Retina / HD screens (iPhone, MacBook)
  3x        Large         Super-retina screens (iPhone Pro models)

Using Placeholder Images

During early design stages, use grey rectangles with an X through them to represent images that have not been sourced yet. This is a standard wireframe convention that keeps your layout clear without requiring real photos.

Placeholder Image Symbol

  +------------------+
  | \              / |
  |   \          /   |
  |    \        /    |
  |     \      /     |
  |      \    /      |
  |       \  /       |
  |        \/        |
  +------------------+
  Image TBD