Search the component library


Download UI Kit v1.9.0

Allows the user to select, upload, zoom, and crop an image. Can also be used to edit a previously uploaded image.

Download UI Kit v1.9.0

Usage Guidelines

Use this component any time a user needs to edit an image they are uploading.


  • Photo upload from machine or device
  • Ability to scale and reposition photo
  • Photo cropping

Image Selection

Users may select an image using a file input, drag and drop, or another method that works best in the consuming context. Once a file is selected, the image cropper modal should appear.

Using a custom file input.

Using the default file input.

Either the file input or a custom trigger will ultimately open a file chooser.

Scale Photo

A photo may be scaled from 50% to 200% in size by clicking and dragging the slider towards the bottom of the Edit Photo modal.

Initial Scale

Increased Scale

Reposition Photo

The user may also click on their photo and drag it in order to reposition the photo around the silhouette for proper cropping.

The image can’t be dragged past the edges of the crop silhouette so that an undersized selection is impossible.

Initial Position

Photo Repositioned for Cropping


Edit Photo

Silhouette Subtraction
  • Width: Variable, should match desired aspect ratio
  • Height: 200px
  • 30px below top of shaded area
  • Basic slider component
  • Off White background
  • 30px tall background
  • 20px padding above/below
  • 12px fa-photo icon for the small size, 22px icon for the large size
  • 10px outer padding for icons
  • Image should be at least as tall as the crop silhouette
  • Otherwise everything just gets narrower to fill the modal content area.



  • CHANGED: Use slider component.
  • ADDED: Responsive example.


  • REMOVED: Specific details for avatar cropping.


Initial version