How to display Icon or Image as toast like Toast Message?

Maniisha Gorasiya

Suppose, you want to show some Icon or Image messages for a few seconds to notify users upon a specific action, what method will you use?  For ex, on video player user tap and play/pause, mute/unmute, etc icon display for few second. Here it’s important to show icon for notify the user that video play or pause. Text toast message is suppose to easy to create but, what if when you want toast to an image or icon?
Here you will get code for that type of toast message with animation. I’ll create an Extension for toast icon-image, thus you can use it anywhere - anytime with less code.

First of all create extension of UIViewController,

extension UIViewController {

Now create function named showToast() and pass string parameter for Image or Icon name.

func showToast(iconName : String) {

Further, Let’s create UIImageView with CGRect frame for adding icon-image,

let toastIcon = UIImageView(frame: CGRect(x: self.view.frame.size.width/2 - 40, y: self.view.frame.size.height/2 - 40, width: 80, height: 80))

here, i’ll display icon at vertically & horizontally center of screen, so i’m set x: & y: position accordingly that. You can set x, y, height & width accordingly your requirement.

Next i’m set imageview’s design like it’s background color, radius, scale, etc.

toastIcon.backgroundColor = // background color with 0.6 ransparency
 toastIcon.layer.cornerRadius = toastIcon.frame.height / 2 // for rounded image
toastIcon.layer.masksToBounds = true

Here i’m using xcode’s system icon to show video play - pause. You can get your required icon from Main.Storyboard, drop-down imageview and start to type at Image name at right sided inspectors , and it’ll display list of system icons.

let mediumConfig = UIImage.SymbolConfiguration(scale: .medium)

here, mediumConfig  variable for weight of system icon like, small, medium & bold, i’m using medium.

let pauseImg = UIImage(systemName: iconName, withConfiguration: mediumConfig)

pauseImg variable is to set system icon inside of UIImage.

And finally set pause icon inside of toastIcon UIImageView.

toastIcon.image = pauseImg

Set custom color of system icon using .tintcolor and set alpha for ransparency of icon, here i’m set full alpha, you can adjust it as per you want.

toastIcon.tintColor = .white
toastIcon.alpha = 1.0

And finally our Icon Image is ready and add as subview of self.view.


Now, it’s time to give a fabulous animation to that icon.

UIView.animate(withDuration: 4.0, delay: 0.1, options: .curveEaseOut, animations: {
            toastIcon.alpha = 0.0
        }, completion: {(isCompleted) in

Here, i’m set duration of icon with 4 second, this mean the icon is display for 4 second at your screen and than disappear it.
Delay with 0.1 second, this mean icon display after 0.1 second and
Animation with  curveEaseOut, you can set accordingly your choice.

And here the extension is finished and it’s time to see that how to use this extension? It’s too easy to use and guess what ! Only one line code is enough for ready to display the toast icon.

showToast(iconName: “pause”)
 and here your toast Icon is Ready!


No Comment

Leave a Comment

Your email address will not be published.

First Floor, Madhav Complex, V. R. Nagar, Mirjapar Madhapar By Pass Ring Road, Bhuj-370001
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
24 X 7 online support