34

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.

Improve this question
6
  • 8
    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
    Commented Apr 13, 2013 at 14:10
  • 5
    I would strongly recommend using an icon font rather than unicode symbols in this case
    – Zelda
    Commented Apr 13, 2013 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
    Commented Apr 14, 2013 at 15:20
  • 2
    @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
    Commented Sep 29, 2014 at 7:15
  • 2
    I just want to chime in to thank you for not larding up your plugin with dependencies on icon fonts or custom icons, which may conflict with / be redundant with the design of what people will be plugging it in to. Personally I vote for the UTF-8 pencil "U+270E" (UTF-8 is the default encoding for HTML5, so should be safe) plus good documentation on how to change it.
    – Daniel Beck
    Commented Apr 7, 2016 at 13:19

5 Answers 5

Reset to default
27

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.

Improve this answer
3
  • 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
    Commented Apr 14, 2013 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 ♦
    Commented Apr 14, 2013 at 17:10
  • 6
    The problem with 'edit' is translation: in German it's 'bearbeiten' so that's a lot more characters and perhaps not enough space.
    – frenchie
    Commented Jul 22, 2013 at 20:26
10

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>

And as a unicode character, here it is: ✍

Improve this answer
10

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

https://fontawesome.com/

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
Improve this answer
1
  • 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
    Commented Sep 30, 2014 at 6:56
6

I use a rotated pencil symbol:

<span class="edit-icon">&#9998;</span>
<style>
.edit-icon {
  display: inline-block;
  transform: rotateZ(90deg);
}
</style>

https://jsfiddle.net/mudroljub/wjstopLf/

It looks like an edit icon to me.

Improve this answer
0

I'd strongly recommend the gear icon ⚙

Improve this answer

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.