Add Icons

There are two ways to add icon graphics in the Features section of your SwellSpace website.

• Using stock icons provided by SwellSpace
• Using your own images as icons

Use Stock Icons Provided by SwellSpace

A growing number of stock icons are provided for all SwellSpace users. While stock icon graphics could be used in all image placeholders, SwellSpace stock icons were specifically designed to be used in the Feature section of the SwellSpace website.

To access and utilize stock icons, find the image placeholders in the feature section identified by the graphic below. Click on the edit pencil icon.

SwellSpace will prompt you to choose between “Uploading from your computer…” or “Browse our Stock Media.” Click and choose “Browse our stock media.”

‍

Make sure that “Stock Images” is selected on the left-hand side menu of the Stock Media Gallery, and click on the stock icon you would like to use. See below.

For this example, we have chosen the “Dental Insurance” tooth icon.

Once you choose an icon to use, you will find that SwellSpace has:

• The icon's color has now matched the color of the primary color chosen for the website.
• Prepopulated the image Alt Text field with “dental_insurance” for accessibility reasons. We recommend ensuring the Alt Text field is relevant to what you use the icon for. If the prepopulated Alt Text is irrelevant, update to an Alt Text description that better describes the icon image.

To confirm the update, click on the checkmark icon on the top right.

Color-adopting icons are special and unique to SwellSpace. To better exemplify the color-adopting icons, we’ve selected two more features and changed the primary color to pink. See below.

Use Your Own Images as Icons

To use your own image files as icons, find the image placeholders in the feature section identified by the graphic below. Click on the edit pencil icon.

By reviewing the image placeholder, you’ll be able to determine that icon graphics should be sized 140 pixels wide and 140 pixels tall, along with the supported image file types.

SwellSpace will prompt you to choose between “Uploading from your computer or drop an image file here” or “Browse our Stock Media.” Click and choose “Upload from your computer or drop an image file here.”

Once clicked, SwellSpace will prompt you to choose a file from your computer to upload. After uploading your image, SwellSpace will provide you with an image cropping tool.

As stated above, we recommend using images that are specifically sized for the image placeholder. In this case, it is 140 pixels wide and 140 pixels tall. If you cannot provide an image sized to fit 140px x 140px, utilize the image cropping tool.

Image Cropping Tool

In the event that an image uploaded does not exactly match the image size provided in the image placeholder, you’ll be able to use the image cropping tool. After uploading your own image, an image cropping tool will automatically launch.

• If the uploaded image matches the image dimensions provided on the specific image placeholder, the image cropper will automatically fill the graphic space perfectly.
• Suppose the uploaded image DOES NOT MATCH the image dimensions provided on the specific image placeholder. In that case, you will be able to see that the image will not completely fill the space, or areas of the image will fall outside of the image cropper and not be visible to you.

There are specific ways the image cropping tool can be used to help you fit the image chosen into the image placeholder:

• Mouse scroll up and down: zoom in and out of the image
• Mouse drag the image: click and drag the image to the desired position

Click on “Finished” once you feel that you’ve cropped the image correctly.

Once the image is cropped in the preferred crop you would like, it is IMPORTANT to include alt text in the “Alt Text” field. The purpose of Alt Text is to improve accessibility by describing what an image is showing to visitors who do not have the ability to see it.

After providing Alt Text, click on the checkmark to confirm your changes.

‍