Show HN: One clean, developer-focused page for every Unicode symbol

(fontgenerator.design)

198 points | by yarlinghe 43 days ago

41 comments

  • Fileformat 39 days ago
    I run a couple similar sites:

    FileFormat.Info[1] has a page per codepoint. It has been around awhile, so the UI isn't as whizzy, but it has all the data and works w/o JavaScript

    UnicodeSearch[2] is an updated search UI that uses JavaScript and the excellent Tabulator grid widget.

    There are actually a ton of similar sites with a page-per-codepoint. It is all fun to make one, until the bots come along and hammer every page.

    [1] https://www.fileformat.info/info/unicode/char/2248/index.htm

    [2] https://www.unicodesearch.org/

    • darrenf 39 days ago
      Long time fileformat.info user. here, just wanted to say thanks -- always found it incredibly useful for this exact purpose.
      • opello 38 days ago
        Same here, it is a tool that I reach for infrequently but when I need it it's always proven invaluable.
    • catoc 38 days ago
      1. Enthusiastically try fileformat.info

      2. “141 TCF vendor(s) and 69 ad partner(s) want to track you”

      3. Exit :-(

      • Fileformat 38 days ago
        I get where you are coming from, and have put some thought into it.

        I built the site over 20 years ago, and while it was fun to make, I wouldn't have maintained it this long if is was costing me every month.

        I've tried to minimize the intrusiveness: I disabled the pop-up and interstitial ads and I don't serve anything different to people with ad-blockers. And I've stuck with Google Adwords, despite requests from all sorts of questionable alternatives.

        I'm not sure about the future: bots are causing all sorts of trouble, and the ad revenue is trending down and is now less than break even.

        • xigoi 38 days ago
          Isn’t it just a bunch of static pages? You can get that hosted for free.
          • Fileformat 38 days ago
            There wasn't free hosting in 2003 when I first made it. I have thought about converting it to static, but it would be a complete rewrite, and there is always some other new shiny thing to play with instead.

            The newer things I'm doing (like UnicodeSearch.org) are static, though I don't like forcing everyone to have JavaScript enabled.

          • jfoster 37 days ago
            Is there any free static hosting that has lasted longer than a few years?
        • notpushkin 38 days ago
          I love fileformat.info, thank you so much for it!

          I know it probably won’t amount to a lot, but have you tried asking for donations? I love seeing websites I regularly use doing that and not just relying on ads.

        • catoc 38 days ago
          I’m glad to hear it’s helping you keep the costs down - that’s positive. It’s the type of popup that triggers my allergy - which as allergies go is mostly my problem.
          • catoc 25 days ago
            Make a kind remark, get down voted? Why?
  • typeofhuman 39 days ago
    No disrespect but I would not call this "clean". The design is overwhelmingly cluttered and distracting. Especially given that each symbol is obscured by a black square with an arrow covering it. The symbols are themselves very small.

    Maybe get rid of all the noise and just display the symbols in a nice grid without all the fluff or layers.

    • lejalv 39 days ago
      It feels really noisy and specifically, not clean for me too, so much that it pushes me away. It's interesting and fortunate that it works for the author and some (most?) commentators.
    • hnlmorg 39 days ago
      I agree. Unicode references sites are numerous and yet this is one of the worst I’ve used in terms of distracting visual noise.
  • wdporter 39 days ago
    I find this page the cleanest: https://en.wikipedia.org/wiki/List_of_Unicode_characters. I can usually just do a Ctrl-F and find what I want.
  • merelysounds 38 days ago
    Feature request: some context, history and/or example of popular usage.

    Some symbols leave me with more questions than answers, like “LEFT HALF RUNNING MAN”[1].

    I’d like to at least see that it’s a glyph part, that there are two in total, and what does the other half look like; right now the “right half running man” is not listed anywhere on that page, not even in the “related symbols” section.

    Off topic, the running man symbol possibly comes from MouseText character set (the one in the Apple IIc[2]). It was one of many character sets included in the legacy computing block[3].

    [1]: https://fontgenerator.design/symbol/left-half-running-man

    [2]: https://en.wikipedia.org/wiki/MouseText

    [3]: https://en.wikipedia.org/wiki/Symbols_for_Legacy_Computing

    • jon_richards 38 days ago
      This history was a surprisingly interesting read https://news.ycombinator.com/item?id=43667010
    • yarlinghe 38 days ago
      Great example — thanks for the context. I added explicit linking for paired glyph parts (left/right halves) and reference links in Notes. This kind of symbol history is exactly the gap I want to fill.
  • WA 39 days ago
    Nice, but way too many abbreviated descriptions and no way to see the full name of a symbol without clicking on it. Needs a tooltip / title.

    Or better, if 90% of all symbol names are abbreviated, your design simply doesn't work. This is especially apparent in the "arrows" section.

    • yarlinghe 39 days ago
      You’re right.

      The abbreviations (arrows in particular) made scanning worse than it should be. I’ve pushed a quick update: full names on hover/focus, plus a Compact / Readable toggle for the grid.

      Thanks for the nudge.

  • yarlinghe 38 days ago
    24h update after the Show HN — quick recap.

    Based on the feedback here, I spent the last day tightening a few core things:

    - Navigation / mobile: tapping a card now opens the symbol page directly; copy is a separate, larger button. The tiny expand target is gone.

    - Search: alias + lightweight fuzzy matching is in (e.g. “section”, “angstrom”, “greater than”), plus a /codepoint/... fallback so pasting a literal character or U+XXXX always lands on a usable page, even outside the curated index.

    - Missing glyphs: added a small “Font tips (if you see □)” section with system font notes and Noto suggestions.

    - Content: HTML/CSS/JS guidance now recommends writing the literal character + UTF-8 by default; entities/codes are framed as legacy/reference only. Added Notes and improved Related (pairs, confusables, same block).

    - Privacy: removed session recording; analytics are opt-in with a real reject-all (everything works fine with tracking off).

    Direction going forward: fewer generic “how-to” instructions, more symbol-specific context — confusables, paired glyphs, rendering quirks, and references people actually look for.

    Thanks again for the detailed feedback — it materially improved the project.

  • jdeisenberg 39 days ago
    I’m looking at the currency block. Each box has a colored “drop shadow”. I spent a minute or so trying to figure out what the significance of the color is. Finally, I noticed that the color appears to cycle between cyan, magenta, and yellow. Is this a design element only, or do the colors actually have some meaning with respect to the symbol?
    • yarlinghe 39 days ago
      Purely cosmetic. In hindsight, probably unnecessary — but once you add color, it’s hard to stop
      • troupo 39 days ago
        I was going to complain about something or other in the design but then stopped myself: we don't get enough quirky designs as it is.
      • mrngm 38 days ago
        I do like how it has some brutalist web design elements. With regards to drop-shadow colours on the /symbols page, it doesn't provide additional structure, so I would choose either none or a grayscale tint. Or, if you prefer colours, choose as many distinct colours as there are categories, such that they provide that additional structure.

        The symbols on that page could be a bit bigger, though, as they are the main subject. (I changed 1.125rem to something like 1.6rem for text-lg; that works, but it could get a bit crowded with the clickable arrow on lower resolution screens).

        I'm not a huge fan of things that move; the offset of a block of symbols, as well as scaling of an individual symbol block when hovering seems a bit too much. I would do either, but not both.

    • spoiler 39 days ago
      Not the author, but it seems to be only stylistic
  • stack_framer 38 days ago
    It doesn't fit my definition of "clean" at all, but that's a subjective word anyway. I do have some feedback (unrelated to being clean):

    - The search field is arguably the most important element on the site. It might benefit from a magnifying glass icon and/or some visual distinctions that make it actually look like a text input for searching. It's thick border and shadow make it look like all the other boxes on the page that have thick borders and shadows!

    - Speaking of the search field, it would be really nice if it supported fuzzy search. For example, I searched for "greater than" and got no results. I had to search for "greater-than" (with a dash) to find the math symbols (like ≥).

    - The small font size of the symbols makes them really hard to see for old people like me who are pretending not to be old.

    - Ditch the analytics and cookie consent nonsense. These are anti-developer!

    • savolai 38 days ago
      +1 The small font size combined with the big black box with green arrow that, at least on my iphone xs, covers part of the symbol itself, makes it really hard to see the symbols themselves on front page.
  • yarlinghe 43 days ago
    Planning to add more symbol-specific notes (confusables, common pitfalls, rendering quirks). Curious what details people usually look for but can’t find.
    • __patchbit__ 43 days ago
      I don't know how to find the ideal font for the missing glyph on my environment which is BSD.

      Using the `unicode' command from plan9userspace, for example

         unicode 2ff0-2fff
      
      the last three symbols are shown inside emacs as squares with the four hex values inside.

      Typing in the search field `2fff' finds `no match found'.

      • yarlinghe 43 days ago
        Good catch — I just pushed an update based on this.

        The symbols search now supports code-point lookup, so you can search by:

        U+2FFF

        0x2FFF

        plain hex (2fff, 4–6 digits)

        This makes it possible to jump straight to a symbol page even when the glyph doesn’t render locally and you only have the code point (like the Emacs/BSD case you described).

        One limitation to note: some symbols aren’t covered by common or default system fonts, so they may still appear as tofu boxes depending on the font stack. That’s a font coverage issue rather than Unicode itself.

        Appreciate you calling this out — this was exactly the kind of workflow gap I wanted to catch.

        • longor1996 39 days ago
          Maybe you could use unifont glyphs (drawn as SVGs?) as fallback?
    • layer8 38 days ago
      The useful info that doesn’t already exist a dozen times on the web is the info you can’t auto-generate.
  • california-og 39 days ago
    My go-to site for Unicode symbols is graphemica.com. I like that you show very directly the different use cases, but miss different encodings and the ability to browse unicode sequentially.
    • jeffhwang 39 days ago
      +1 graphemica has the right mix of completeness and simplicity for my tastes.
  • toss1 38 days ago
    Very cool and helpful - I'll be using this a lot!

    Interesting I discovered two new-to-me temperature symbols (℃ and ℉), but couldn't find the Alt-0176 ° generic degree sign that shows up on the MS Character Map app. I also found the There Exists symbol ∃ !! I'd been seeking for years; it was so useful since finding out about it in college logic courses... This will be even more useful when the Alt-code fields are all filled in! Thanks!

  • diziet 38 days ago
    Cool! Ideas: At least do an ensemble approach by queuering llms to explain what the symbols "are". It's so auto generated now. Link to wikipedia. https://en.wikipedia.org/wiki/Approximation#Typography

    Developers need to understand context too, not see a static page of "macOS: Use Character Viewer (Control + Command + Space) and search by name, or copy/paste."

    The related to symbols make little sense. For example: https://fontgenerator.design/symbol/acute-angle Does not link to all other "angle" pages, but does to Aktieselskab?

    • yarlinghe 38 days ago
      Good point. I added a Notes section and reworked “Related” to focus on things people actually get confused by (pairs, confusables, same block), not just category adjacency.
  • arendtio 39 days ago
    Some constructive criticism:

    Please don't display text directly on the grid background image. It makes it impossible to read the text easily. Currently, this is the case when you open the page for a specific symbol in the 'Usage & Context' section.

  • keepamovin 39 days ago
    This is beautiful. Love the design. When I read the title I thought it was "one page per Unicode" so I click on the codes and hope a page will open with a giant Unicode where I can see about it in details.

    Oh well! Still good.

    When I click the "Click to copy" my UI reflex tells me to look for a "Copied!" or similar acknowledgement. But I don't see one, so there's uncertainty if it was copied safely to my invisible clipboard or not.

    Please keep making this, it's good! What inspired you for the design? I like this style, and notice it around, but can't pinpoint.

    • phforms 39 days ago
      Don’t know if it was added after your comment, but there actually is one separate page for each character, just click the arrow in the top-right corner of each box. For more "giant" character previews I can recommend https://decodeunicode.org/en (which is more focussed on writing systems though).

      There is also a "Copied x" toast (is this the correct term? idk) at the bottom of the viewport when you click a character box, maybe it was also added later on.

      • kmoser 38 days ago
        > There is also a "Copied x" toast (is this the correct term? idk) at the bottom of the viewport

        It's obscured by the "We use optional cookies..." popup.

      • keepamovin 39 days ago
        Or maybe I just wasn't looking at the bottom! Thanks
  • ChrisMarshallNY 39 days ago
    Very nice.

    I found it odd, that tapping on a square “highlights” it, by making it “pop,” but nothing else really happens.

    It took me a bit to figure out that I need to actually select the arrow in the upper right corner, to get the page.

    • yarlinghe 38 days ago
      Agreed — the small expand target was a mistake, especially on mobile. I switched to “tap card = open details” and moved copy into a dedicated, larger button. Much clearer now.
    • tantalor 39 days ago
      The arrow is too small to click on mobile
  • amelius 39 days ago
    Could use a list of (free) fonts that support the corresponding glyph.
    • yarlinghe 38 days ago
      Added a small “Font tips (if you see □)” section with system font notes and Noto suggestions. Also added a codepoint fallback page so you can still inspect encodings even when the glyph doesn’t render locally.
    • layer8 38 days ago
      Also coverage by system fonts.
  • vishnuharidas 38 days ago
    Sharing the UTF-8 Playground I built recently: https://utf8-playground.netlify.app/
  • thwarted 38 days ago
    It's odd that searching for "section" finds U+2E39 (Top Half Section Sign) but not U+00A7 (Section Sign).

    The directions for input on on each operating system are all the same, use an app? On Windows there's a key sequence based on the codepoint integer. It should tell you exactly what to type. The Linux one is especially odd "Use the Character Map app or a Compose key sequence, then paste into your app" because if there's a compose key sequence you don't need to paste it.

  • chrismorgan 39 days ago
    > Use an HTML entity, a decimal code, or a hex code.

    Please no: just write the character. <, & and (in quoted attributes) " or ' are the only characters that need to be encoded; a few others have arguable benefit to being encoded (most notably NO-BREAK SPACE), but most Unicode characters should just be put in literally. The days when you couldn’t be confident of the file encoding are past: your HTML is being served as UTF-8 (or in the rare case it isn’t, you should fix that instead of avoiding non-ASCII in the source).

    Same deal with CSS (" and \ are the only ones you need to escape) and JavaScript (" or ' or `, as appropriate).

    URLs? Occasionally you may encounter a legacy system where you need to percent-encode it yourself (similarly around punycoding internationalised domain names), but you can almost always (and thus, in my opinion, should) just write it and leave anything that wants it to be ASCII to perform the percent-encoding itself.

    Excel I can’t comment on, but I presume you can just write "≈" and UNICHAR should almost never be used.

    • yarlinghe 39 days ago
      Yep — fully agree.

      For modern HTML/CSS/JS, you should just write the character and serve UTF-8. The entities / codes are there purely as reference for legacy cases, debugging, or when you only have a code point and no rendered glyph — not as a recommendation for normal authoring.

      • ghusbands 38 days ago
        Your site still says "HOW TO ADD ALMOST EQUAL TO IN HTML? Use an HTML entity, a decimal code, or a hex code."

        That is incorrect. As you say, you should just write the character in your HTML and ensure it's served with the correct encoding. If it's just for legacy cases, debugging or such, say so on the site.

        • yarlinghe 38 days ago
          Agreed. Updated the HTML section to recommend writing the literal character + UTF-8 by default. Numeric refs/entities are now explicitly framed as legacy / edge-case references.
  • LordGrey 43 days ago
    I really like this. I appreciate the many "copy" buttons that make it easy to grab various font values once I find a character. Good job!
    • yarlinghe 43 days ago
      Thanks — glad the copy buttons are useful. That was exactly the goal.
  • abeyer 38 days ago
    You say "for every unicode symbol", which I guess is true if you search by code, but for anything that isn't in your curated set I'm unable to even find it if I paste the literal character or use the "official" name.

    eg ℝ "Double-Struck Capital R" won't show up at all unless I search it as U+211D.

    • yarlinghe 38 days ago
      You’re right — the main index is curated. I added a /codepoint/… fallback so pasting a literal character or U+XXXX always lands you on a dev-friendly encoding page, even outside the curated sets. I also clarified this in the UI copy.
  • rsync 38 days ago
    Clean ?

    - Gratuitous, unnecessary cookies (and accompanying cookie consent dialog)

    - cloudflare insights built into the pages

    - non-zero counter in ublock origin

    That's before we even get to the page source which contains, among other things:

      "text\":\"First, ensure you're using a modern browser. If problems persist, try refreshing the page or clearing your browser cache. Some older devices may have limited font support.\"}}
    
    "Clean" web pages don't need hints like this - they work without clearing browser cache or worrying about "older devices".

    I haven't seen this on HN in a while so it is worth reposting:

    https://motherfuckingwebsite.com/

    • johnnyfived 38 days ago
      Not super against cookie tracking or consent especially for a free platform, but these extreme color contrasts don't even seem to have any obvious correlations. Is it done just for looks? That's a crazy decision for a font information site
  • victrflow 39 days ago
    Ohh, this is great! I actually was looking for something like this the other day. Thanks for sharing and nice work!
  • ornornor 38 days ago
    Very clean design, congrats!

    I’d love to see a section describing the glyph’s usage (I usual have to check Wikipedia for that) and which compose key sequence to use to type it. For instance on Linux (maybe other OSes too?) you can type <compose key> + e + = and get the euro sign.

  • BrouteMinou 38 days ago
    Why do I get a spinning "waiting" on every page? That doesn't seem "clean" to me... That's supposed to be raw HTML with a search.

    It's cluttered with how to put your HTML character in your HTML, while being supposedly focused for devs...

    All that doesn't make sense to me.

  • mda 39 days ago
    On mobile, the expand icon covers 1/4 of each character so it is hard to see what they are
    • StrangeSound 39 days ago
      Opposite problem for me. I'm finding it impossible to expand because the button is so small!
    • yarlinghe 39 days ago
      Yeah, mobile is rougher than desktop right now. Thanks for flagging it.
  • layer8 38 days ago
    The styling/design doesn’t work with dark-mode extensions like Noir.
  • whalesalad 39 days ago
    Gotta pay homage to the OG: https://raquo.net/rsaquo/
  • NooneAtAll3 39 days ago
    How do I search for egyptian hieroglyphs? searching for "egyptian" neither for "hieroglyph" works

    searching directly for 𓁤 also doesn't work

    • NooneAtAll3 39 days ago
      expanded button go over the side of the screen for me

      pressing "V", which I'd assume meant "expand horizontal button queue into a vertical text list" instead collapses all descriptions and turns "v" into a hamburger button...

  • varunkv 38 days ago
    This is some great tool for account holders who wants aesthetic styling. Wanted to know how you monetize this clean product?
  • Freak_NL 39 days ago
    > We use cookies and similar technologies for analytics (Google Analytics) and session recording (Microsoft Clarity). Ads may be enabled in the future (Google AdSense). By continuing to use this site, you acknowledge this notice. You can manage cookies in your browser settings. EU/UK users: this serves as our cookie notice.

    No. Please just give me an option to reject all tracking cookies instead of just kicking me in the face with a done deal.

    Whoever wrote this 'EU/UK users: this serves as our cookie notice' is ignorant of the actual law. Have a look at:

    https://gdpr.eu/cookies/

    • yarlinghe 39 days ago
      Fair point — you’re right to call this out. I’ve now removed Microsoft Clarity (no session recording/heatmaps), and GA4 is opt‑in with a real “Reject all” option (default off). This is already deployed.
  • rswail 39 days ago
    I'd like the hint to display the hidden parts of each box when hovered.

    I don't need to be told on each one to "Click to Copy".

    But nice concept.

    • yarlinghe 39 days ago
      Good points. The hover hint could definitely do more useful work, and the repeated “Click to Copy” is probably overexplaining. UI polish still very much in progress
  • MassPikeMike 38 days ago
    See also the very comprehensive presentation at https://codepoints.net . For example https://codepoints.net/U+2248?lang=en
  • NoSalt 38 days ago
    I know the colors are a little ... intense, but I love it!
  • slashdave 38 days ago
    Huh. Why can't it find "Angstrom" (U+212B)?
  • brisket_bronson 38 days ago
    Quite useful, but that's far from "clean".
  • alexpadula 39 days ago
    Useful!