I want to create icons easily. Is there any tool (or tutorial) that can help creating beautiful semantic words that can be added to an existing icon?

Suppose that we have this icon:
Example icon image

and we want to easily add a word in a beautiful way like this:
Example icon with text image

  • 1
    If you don't want to use html + css, like mast0r suggests, you'd probably want to use something like Gimp or Photoshop ( Since you most likely would be working with the .png version of the icon ).
    – Joonas
    Nov 30, 2012 at 15:12
  • 1
    You draw it in image editing software.
    – DA01
    Nov 30, 2012 at 17:50
  • What do you mean by semantic in this context?
    – kontur
    Dec 3, 2012 at 14:54

1 Answer 1


I would do it like this: CSS + HTML

  • The icon as background image
  • The text as normal HTML-text
  • That can be done of course, but I want the text to be inserted in the icon in a more beautiful way, like the example I gave , where the text is injected in a flag form.
    – skiabox
    Nov 30, 2012 at 15:23
  • 3
    @skiabox: the text isn't "injected in a flag form", someone has designed a flag overlay for that icon (or possibly for a family of similar icons), and text has been added to that. So you could add the flag as a PNG overlay between the original icon and HTML text.
    – e100
    Nov 30, 2012 at 15:33
  • CSS3 offers many opportunities for the text representation: shadows, "embedded" look, stroke, rotation etc. So it is no need to generate a new image every time you need another label for the same icon.
    – mast0r
    Nov 30, 2012 at 19:17

Your Answer

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

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