I am developing a web page for web based application, i am new to web design, so forgive if i have asked very basic question.

i want to create icons and embed into my existing png image file. i have attached sample image below and circle the icon which i want.

enter image description here

so i want to know how to embed the icons into the image, is there any specific tool to create those icons?.

  • You should give attribution (i.e., a URL) for that image. I would guess that's a requirement for both this site and the one you got the image from (if that site would allow it at all, though with attribution it's probably covered under fair use). Commented Nov 3, 2014 at 22:36
  • Using SVGs may be good for something like this so that they can be scaled and changed as needed in the browser itself Commented Nov 4, 2014 at 3:39
  • 2
    The best way to create hand drawn graphics is to draw them by hand. The ones in the example look like they were drawn with a mouse or tablet, the stroke is consistent.
    – Phil
    Commented Nov 4, 2014 at 3:49

3 Answers 3


If you already have your banner and are wondering about the little drawings on top, then I can think of two ways of getting them:

1) Buy them online, already made. Sites like iStock or GraphicRiver offer vector illustrations with transparent backgrounds, so it's quite easy to open the files and just paste them on your banner. There are also free icons you can use. Take a look at Vecteezy, The Noun Project or FlatIcon, to name just a few.

2) Draw them yourself. You can either use your mouse (Illustrator or Inkscape would be better for this), or, if you are interested in drawing you could get a graphic tablet. The small ones are not that expensive, and in any case if it's your thing it would be nothing but an investment.

Good luck!

  • thanks.. i have decided to draw my own using illustrator, which seems to more creative and originality. Commented Nov 4, 2014 at 7:03

There is a lot of software out there, some free and some paid.

Just to list a few:



Ultimate Paint




Adobe Fireworks

Adobe Photoshop

Adobe Illustrator


All of which have different learning curves, you can fin more graphics software by doing a quick Google search.


If I understand your question correctly, then you have two options:

  1. You can hand-draw the icons on paper, and scan them into an image-editing program. You can turn the "icon" into a fixed-size PNG with a transparent background, or into a scale-able SVG file. Then, just upload that image into your website, turn it into a link, and position it correctly... using absolute, fixed, float, etc CSS styles.

  2. You can embed the hand-drawn icons as part of the background image itself. Then, you'll be working with just a single large image. You can turn different parts of that image into links by creating an image-map url in something like Dreamweaver. What that means is that you identify a part of your image (via coordinates) to be a link -- an area that you can "shape" into being the same form and location as in your background image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.