Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm trying to keep a very light payload on a wordpress plugin I'm writing.

Users will be able to:

  • add - +
  • refresh - ⟳
  • edit

I'm thinking of using the pencil glyph: ✎, but I'm not sure about it. What's a good clear way to indicate this action lets you edit things?

I'm going to be providing title tool tips as well, but I want the icon to be as clear as possible without having to draw up custom icons.

share|improve this question
6  
Are you going to provide your own font for that? You have to be careful about support for those characters: your refresh glyph is just a square in Chrome. The pencil also doesn't render very well at anything below 20px. –  Koen Lageveen Apr 13 '13 at 14:10
2  
I would strongly recommend using an icon font rather than unicode symbols in this case –  Ben Brocka Apr 13 '13 at 18:38
1  
What's hilarious to me is that @KoenLageveen edited that comment. Guess what I see as the icon? A pencil. I'm looking for something with wide support - I thought unicode was pretty well supported by now. –  MattK Apr 14 '13 at 15:20
    
Whatever icon you are using, you must use title/alt to display text on mouse over. –  kwelsan Jun 11 '13 at 12:07
    
@MattK Yes, Recent versions of most operating systems have good support for Unicode. But Unicode defines over 100,000 characters. No single font contains glyphs for all those characters. And every OS has a limited set of fonts. So you must verify that your customers are using an OS with a font containing a glyph for the desired character. If that is not feasible, the. Use either image files or a non-Unicode icon font. –  Basil Bourque Sep 29 at 7:15

3 Answers 3

up vote 9 down vote accepted

The closest to a standard symbol for edit is , but that is by no means universally understood.

I would suggest using an Edit button instead.

share|improve this answer
    
Would you make the same suggestiong for a tight interface on something like a mobile device? I'm looking for icons if possible due to the space I'd like to put these actions into. –  MattK Apr 14 '13 at 15:23
2  
@MattK If you are willing to not use a unicode symbol, there are better options. If it's for a native app, then there are standard icons which I would suggest using. –  JohnGB Apr 14 '13 at 17:10
    
The problem with 'edit' is translation: in German it's 'bearbeiten' so that's a lot more characters and perhaps not enough space. –  frenchie Jul 22 '13 at 20:26

You can use Fontawesome. it's a great font special made for icons. it delivers a lot of useful icons for Edit, Add, Login, Logout, Delete etc.

http://fortawesome.github.io/Font-Awesome/

They use this icon for editing:

edit icon

I personally use icons all the time because when you have a good icon people will know what you mean. but you can always put the text 'Edit' after the icon.

Example:

© Edit
share|improve this answer
    
The problem with this icon is that the rounded corner box will look a bit weird and possibly confusing when used in a rounded rectangle button. –  Basil Bourque Sep 30 at 6:56

The Wingdings font that comes default with Windows has a neat symbol that can be used for EDIT.

Edit Symbol in Wingdings

This symbol appears in place of the question mark ('?') (Unicode 0x3F). To add this to your page, you could use:

<span style="font-family:Wingdings;">?</span>


EDIT :
Apparently, Wingdings font family does not work on Firefox and Opera. Instead, you can use the Unicode symbol U+270D to obtain this:

Edit Symbol in Unicode

In code, that would look something like:

<span style='font-size:20px;'>&#x270D;</span>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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