初代編集長ブログ―安田英久

矢印・特殊文字・記号一覧|コピペ・標準フォントで使用可能

矢印、検索マーク、マップピンなど、WEBページでアイコンとして使える絵文字を一覧にまとめました。これらのUnicodeで定義される特殊文字・記号・絵文字は、画像を使わず、標準フォントだけで表示することができるので、ページが重くなりにくく、変更も楽というメリットがあります。CTAボタンや見出し、区切り線などをおしゃれに装飾することもできるでしょう!
Web担のなかの人

今日は、Webページのデザインにおけるアクセントとして、画像を一切使わずに、フォントだけで表現できる手法を、実例付きで455個まとめて紹介します。

一昔前は、アスキーアートを作るのに罫線やギリシャ文字を使っていましたが、それはEUCやShift JISの時代の話。

今はみなさんWebサイトを作るときに文字コードはUTF-8にしていますよね? となると、そのままでアイコン的に使える文字や絵文字がけっこうあるのです。

その中から、独断と偏見で選んでグループ分けした455個を、まとめて紹介します!

※「文字」欄のアイコン(実際はテキストです)をコピペするか、または、「文字参照」欄のHTMLコードをコピペしてください。

矢印系

細い矢印系

文字文字参照説明
↖NORTH WEST ARROW
↗NORTH EAST ARROW
↘SOUTH EAST ARROW
↙SOUTH WEST ARROW
↞LEFTWARDS TWO HEADED ARROW
↟UPWARDS TWO HEADED ARROW
↡DOWNWARDS TWO HEADED ARROW
↢LEFTWARDS ARROW WITH TAIL
↤LEFTWARDS ARROW FROM BAR
↥UPWARDS ARROW FROM BAR
↧DOWNWARDS ARROW FROM BAR
↨UP DOWN ARROW WITH BASE
↰UPWARDS ARROW WITH TIP LEFTWARDS
↱UPWARDS ARROW WITH TIP RIGHTWARDS
↲DOWNWARDS ARROW WITH TIP LEFTWARDS
↳DOWNWARDS ARROW WITH TIP RIGHTWARDS
↴RIGHTWARDS ARROW WITH CORNER DOWNWARDS
↵DOWNWARDS ARROW WITH CORNER LEFTWARDS
↶ANTICLOCKWISE TOP SEMICIRCLE ARROW
↷CLOCKWISE TOP SEMICIRCLE ARROW
↸NORTH WEST ARROW TO LONG BAR
↹LEFTWARDS ARROW TO BAR OVER RIGHTWARDS ARROW TO BAR
↺ANTICLOCKWISE OPEN CIRCLE ARROW
↻CLOCKWISE OPEN CIRCLE ARROW
↼LEFTWARDS HARPOON WITH BARB UPWARDS
↽LEFTWARDS HARPOON WITH BARB DOWNWARDS
↾UPWARDS HARPOON WITH BARB RIGHTWARDS
↿UPWARDS HARPOON WITH BARB LEFTWARDS
⇀RIGHTWARDS HARPOON WITH BARB UPWARDS
⇁RIGHTWARDS HARPOON WITH BARB DOWNWARDS
⇂DOWNWARDS HARPOON WITH BARB RIGHTWARDS
⇃DOWNWARDS HARPOON WITH BARB LEFTWARDS
⇄RIGHTWARDS ARROW OVER LEFTWARDS ARROW
⇅UPWARDS ARROW LEFTWARDS OF DOWNWARDS ARROW
⇆LEFTWARDS ARROW OVER RIGHTWARDS ARROW
⇇LEFTWARDS PAIRED ARROWS
⇈UPWARDS PAIRED ARROWS
⇉RIGHTWARDS PAIRED ARROWS
⇊DOWNWARDS PAIRED ARROWS
⇋LEFTWARDS HARPOON OVER RIGHTWARDS HARPOON
⇌RIGHTWARDS HARPOON OVER LEFTWARDS HARPOON
⇠LEFTWARDS DASHED ARROW
⇡UPWARDS DASHED ARROW
⇢RIGHTWARDS DASHED ARROW
⇣DOWNWARDS DASHED ARROW
⇤LEFTWARDS ARROW TO BAR
⇥RIGHTWARDS ARROW TO BAR
⇳UP DOWN WHITE ARROW
➛DRAFTING POINT RIGHTWARDS ARROW
➝TRIANGLE-HEADED RIGHTWARDS ARROW

(ちょっと)太い矢印系

文字文字参照説明
↕UP DOWN ARROW
➔HEAVY WIDE-HEADED RIGHTWARDS ARROW
➘HEAVY SOUTH EAST ARROW
➙HEAVY RIGHTWARDS ARROW
➚HEAVY NORTH EAST ARROW
➜HEAVY ROUND-TIPPED RIGHTWARDS ARROW
➞HEAVY TRIANGLE-HEADED RIGHTWARDS ARROW

ブロック矢印(的なものを含む)系

文字文字参照説明
⇍LEFTWARDS DOUBLE ARROW WITH STROKE
⇐LEFTWARDS DOUBLE ARROW
⇑UPWARDS DOUBLE ARROW
⇓DOWNWARDS DOUBLE ARROW
⇕UP DOWN DOUBLE ARROW
⇖NORTH WEST DOUBLE ARROW
⇗NORTH EAST DOUBLE ARROW
⇘SOUTH EAST DOUBLE ARROW
⇙SOUTH WEST DOUBLE ARROW
⇚LEFTWARDS TRIPLE ARROW
⇛RIGHTWARDS TRIPLE ARROW
⇦LEFTWARDS WHITE ARROW
⇧UPWARDS WHITE ARROW
⇨RIGHTWARDS WHITE ARROW
⇩DOWNWARDS WHITE ARROW
⇪UPWARDS WHITE ARROW FROM BAR
⇫UPWARDS WHITE ARROW ON PEDESTAL
⇬UPWARDS WHITE ARROW ON PEDESTAL WITH HORIZONTAL BAR
⇭UPWARDS WHITE ARROW ON PEDESTAL WITH VERTICAL BAR
⇮UPWARDS WHITE DOUBLE ARROW
⇯UPWARDS WHITE DOUBLE ARROW ON PEDESTAL
⇰RIGHTWARDS WHITE ARROW FROM WALL
⏎RETURN SYMBOL
➟DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
➠HEAVY DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
➡BLACK RIGHTWARDS ARROW
➥HEAVY BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW
➦HEAVY BLACK CURVED UPWARDS AND RIGHTWARDS ARROW
➧SQUAT BLACK RIGHTWARDS ARROW
➨HEAVY CONCAVE-POINTED BLACK RIGHTWARDS ARROW
➩RIGHT-SHADED WHITE RIGHTWARDS ARROW
➪LEFT-SHADED WHITE RIGHTWARDS ARROW
➫BACK-TILTED SHADOWED WHITE RIGHTWARDS ARROW
➬FRONT-TILTED SHADOWED WHITE RIGHTWARDS ARROW
➭HEAVY LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➮HEAVY UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➯NOTCHED LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➱NOTCHED UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW

ちょっと変わった矢印系

文字文字参照説明
↜LEFTWARDS WAVE ARROW
↝RIGHTWARDS WAVE ARROW
↩LEFTWARDS ARROW WITH HOOK
↪RIGHTWARDS ARROW WITH HOOK
↫LEFTWARDS ARROW WITH LOOP
↬RIGHTWARDS ARROW WITH LOOP
↭LEFT RIGHT WAVE ARROW
↯DOWNWARDS ZIGZAG ARROW
⇜LEFTWARDS SQUIGGLE ARROW
⇝RIGHTWARDS SQUIGGLE ARROW
⇞UPWARDS ARROW WITH DOUBLE STROKE
⇟DOWNWARDS ARROW WITH DOUBLE STROKE
⇱NORTH WEST ARROW TO CORNER
⇲SOUTH EAST ARROW TO CORNER
⍅APL FUNCTIONAL SYMBOL LEFTWARDS VANE
⍆APL FUNCTIONAL SYMBOL RIGHTWARDS VANE
⍏APL FUNCTIONAL SYMBOL UPWARDS VANE
⍖APL FUNCTIONAL SYMBOL DOWNWARDS VANE
☇LIGHTNING
☈THUNDERSTORM
➰CURLY LOOP
➲CIRCLED HEAVY WHITE RIGHTWARDS ARROW
➳WHITE-FEATHERED RIGHTWARDS ARROW
➴BLACK-FEATHERED SOUTH EAST ARROW
➵BLACK-FEATHERED RIGHTWARDS ARROW
➶BLACK-FEATHERED NORTH EAST ARROW
➷HEAVY BLACK-FEATHERED SOUTH EAST ARROW
➸HEAVY BLACK-FEATHERED RIGHTWARDS ARROW
➹HEAVY BLACK-FEATHERED NORTH EAST ARROW
➺TEARDROP-BARBED RIGHTWARDS ARROW
➻HEAVY TEARDROP-SHANKED RIGHTWARDS ARROW
➼WEDGE-TAILED RIGHTWARDS ARROW
➽HEAVY WEDGE-TAILED RIGHTWARDS ARROW
➾OPEN-OUTLINED RIGHTWARDS ARROW

矢印的に使える系

文字文字参照説明
⌃UP ARROWHEAD
⌄DOWN ARROWHEAD
⍃APL FUNCTIONAL SYMBOL QUAD LESS-THAN
⍄APL FUNCTIONAL SYMBOL QUAD GREATER-THAN
⍇APL FUNCTIONAL SYMBOL QUAD LEFTWARDS ARROW
⍈APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⍌APL FUNCTIONAL SYMBOL QUAD DOWN CARET
⍍APL FUNCTIONAL SYMBOL QUAD DELTA
⍐APL FUNCTIONAL SYMBOL QUAD UPWARDS ARROW
⍒APL FUNCTIONAL SYMBOL DEL STILE
⍓APL FUNCTIONAL SYMBOL QUAD UP CARET
⍔APL FUNCTIONAL SYMBOL QUAD DEL
⍗APL FUNCTIONAL SYMBOL QUAD DOWNWARDS ARROW
⏩BLACK RIGHT-POINTING DOUBLE TRIANGLE
⏪BLACK LEFT-POINTING DOUBLE TRIANGLE
⏫BLACK UP-POINTING DOUBLE TRIANGLE
⏬BLACK DOWN-POINTING DOUBLE TRIANGLE
▲BLACK UP-POINTING TRIANGLE
△WHITE UP-POINTING TRIANGLE
▴BLACK UP-POINTING SMALL TRIANGLE
▵WHITE UP-POINTING SMALL TRIANGLE
▶BLACK RIGHT-POINTING TRIANGLE
▸BLACK RIGHT-POINTING SMALL TRIANGLE
▹WHITE RIGHT-POINTING SMALL TRIANGLE
►BLACK RIGHT-POINTING POINTER
▻WHITE RIGHT-POINTING POINTER
▼BLACK DOWN-POINTING TRIANGLE
▽WHITE DOWN-POINTING TRIANGLE
▾BLACK DOWN-POINTING SMALL TRIANGLE
▿WHITE DOWN-POINTING SMALL TRIANGLE
◀BLACK LEFT-POINTING TRIANGLE
◂BLACK LEFT-POINTING SMALL TRIANGLE
◃WHITE LEFT-POINTING SMALL TRIANGLE
◄BLACK LEFT-POINTING POINTER
◅WHITE LEFT-POINTING POINTER
➢THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD
➣THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD
➤BLACK RIGHTWARDS ARROWHEAD
🔺🔺UP-POINTING RED TRIANGLE
🔻🔻DOWN-POINTING RED TRIANGLE
🔼🔼UP-POINTING SMALL RED TRIANGLE
🔽🔽DOWN-POINTING SMALL RED TRIANGLE
⌲CONICAL TAPER
⌳SLOPE

矢印的に使える系と組み合わせるといいかも系

文字文字参照説明
█FULL BLOCK
■BLACK SQUARE
⬛BLACK LARGE SQUARE
⬜WHITE LARGE SQUARE

手で矢印系

文字文字参照説明
☚BLACK LEFT POINTING INDEX
☛BLACK RIGHT POINTING INDEX
☜WHITE LEFT POINTING INDEX
☝WHITE UP POINTING INDEX
☞WHITE RIGHT POINTING INDEX
☟WHITE DOWN POINTING INDEX
👈👈WHITE LEFT POINTING BACKHAND INDEX
👉👉WHITE RIGHT POINTING BACKHAND INDEX
☝WHITE UP POINTING INDEX
👆👆WHITE UP POINTING BACKHAND INDEX
👇👇WHITE DOWN POINTING BACKHAND INDEX

いろいろなアイコン系

マーク系

文字文字参照説明
☐BALLOT BOX
☑BALLOT BOX WITH CHECK
☒BALLOT BOX WITH X
⚐WHITE FLAG
⚑BLACK FLAG
✅WHITE HEAVY CHECK MARK
✓CHECK MARK
✔HEAVY CHECK MARK
✕MULTIPLICATION X
✖HEAVY MULTIPLICATION X
✗BALLOT X
✘HEAVY BALLOT X
✙OUTLINED GREEK CROSS
✚HEAVY GREEK CROSS
✛OPEN CENTRE CROSS
✜HEAVY OPEN CENTRE CROSS
❌CROSS MARK
❍SHADOWED WHITE CIRCLE
❎NEGATIVE SQUARED CROSS MARK
❏LOWER RIGHT DROP-SHADOWED WHITE SQUARE
❐UPPER RIGHT DROP-SHADOWED WHITE SQUARE
❑LOWER RIGHT SHADOWED WHITE SQUARE
❒UPPER RIGHT SHADOWED WHITE SQUARE
❓BLACK QUESTION MARK ORNAMENT
❔WHITE QUESTION MARK ORNAMENT
❕WHITE EXCLAMATION MARK ORNAMENT
❖BLACK DIAMOND MINUS WHITE X
❗HEAVY EXCLAMATION MARK SYMBOL
🉐🉐CIRCLED IDEOGRAPH ADVANTAGE
🚬🚬SMOKING SYMBOL
🚹🚹MENS SYMBOL
🚺🚺WOMENS SYMBOL
🚻🚻RESTROOM
🚼🚼BABY SYMBOL

天気・地形アイコン系

文字文字参照説明
☀BLACK SUN WITH RAYS
☁CLOUD
☂UMBRELLA
☃SNOWMAN
☄COMET
☼WHITE SUN WITH RAYS
☽FIRST QUARTER MOON
☾LAST QUARTER MOON
⛄SNOWMAN WITHOUT SNOW
⛅SUN BEHIND CLOUD
🌁🌁FOGGY
🌂🌂CLOSED UMBRELLA
🌄🌄SUNRISE OVER MOUNTAINS
🌅🌅SUNRISE
🌙🌙CRESCENT MOON
🌛🌛FIRST QUARTER MOON WITH FACE
🌟🌟GLOWING STAR
🌠🌠SHOOTING STAR

星・アスタリスク・花柄系

文字文字参照説明
★BLACK STAR
☆WHITE STAR
✱HEAVY ASTERISK
✲OPEN CENTRE ASTERISK
✳EIGHT SPOKED ASTERISK
✺SIXTEEN POINTED ASTERISK
✻TEARDROP-SPOKED ASTERISK
✼OPEN CENTRE TEARDROP-SPOKED ASTERISK
✽HEAVY TEARDROP-SPOKED ASTERISK
✦BLACK FOUR POINTED STAR
✧WHITE FOUR POINTED STAR
✨SPARKLES
✩STRESS OUTLINED WHITE STAR
✪CIRCLED WHITE STAR
✫OPEN CENTRE BLACK STAR
✬BLACK CENTRE WHITE STAR
✭OUTLINED BLACK STAR
✮HEAVY OUTLINED BLACK STAR
✯PINWHEEL STAR
✰SHADOWED WHITE STAR
✴EIGHT POINTED BLACK STAR
✵EIGHT POINTED PINWHEEL STAR
✶SIX POINTED BLACK STAR
✷EIGHT POINTED RECTILINEAR BLACK STAR
✸HEAVY EIGHT POINTED RECTILINEAR BLACK STAR
✹TWELVE POINTED BLACK STAR
✾SIX PETALLED BLACK AND WHITE FLORETTE
✿BLACK FLORETTE
❀WHITE FLORETTE
❁EIGHT PETALLED OUTLINED BLACK FLORETTE
❂CIRCLED OPEN CENTRE EIGHT POINTED STAR
❃HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK
❄SNOWFLAKE
❅TIGHT TRIFOLIATE SNOWFLAKE
❆HEAVY CHEVRON SNOWFLAKE
❇SPARKLE
❈HEAVY SPARKLE
❉BALLOON-SPOKED ASTERISK
❊EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
❋HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK

動物・植物・食べ物アイコン系

文字文字参照説明
🐵🐵MONKEY FACE
🐶🐶DOG FACE
🐱🐱CAT FACE
🐯🐯TIGER FACE
🐷🐷PIG FACE
🐽🐽PIG NOSE
🐑🐑SHEEP
🐎🐎HORSE
🐫🐫BACTRIAN CAMEL
🐰🐰RABBIT FACE
🐼🐼PANDA FACE
🐔🐔CHICKEN
🐣🐣HATCHING CHICK
🐥🐥FRONT-FACING BABY CHICK
🐦🐦BIRD
🐧🐧PENGUIN
🐸🐸FROG FACE
🐢🐢TURTLE
🐳🐳SPOUTING WHALE
🐬🐬DOLPHIN
🐘🐘ELEPHANT
🐟🐟FISH
🌷🌷TULIP
🌸🌸CHERRY BLOSSOM
🌹🌹ROSE
🌺🌺HIBISCUS
🌻🌻SUNFLOWER
🌼🌼BLOSSOM
🌽🌽EAR OF MAIZE
🌾🌾EAR OF RICE
🌿🌿HERB
🍎🍎RED APPLE
🍏🍏GREEN APPLE
🍙🍙RICE BALL
🍚🍚COOKED RICE
🍛🍛CURRY AND RICE
🍜🍜STEAMING BOWL
🍝🍝SPAGHETTI
🍞🍞BREAD
🍖🍖MEAT ON BONE
🍟🍟FRENCH FRIES
🍠🍠ROASTED SWEET POTATO
🍡🍡DANGO
🍢🍢ODEN
🍣🍣SUSHI
🍤🍤FRIED SHRIMP
🍬🍬CANDY
🍰🍰SHORTCAKE
🍴🍴FORK AND KNIFE
🍵🍵TEACUP WITHOUT HANDLE
🍶🍶SAKE BOTTLE AND CUP
🍷🍷WINE GLASS
🍸🍸COCKTAIL GLASS
🍹🍹TROPICAL DRINK
🍺🍺BEER MUG
🍻🍻CLINKING BEER MUGS
🎀🎀RIBBON
🎁🎁WRAPPED PRESENT
🎂🎂BIRTHDAY CAKE
🎃🎃JACK-O-LANTERN
🎄🎄CHRISTMAS TREE

その他モノ系

文字文字参照説明
⌚WATCH
⌛HOURGLASS
⏳HOURGLASS WITH FLOWING SAND
☎BLACK TELEPHONE
☏WHITE TELEPHONE
☔UMBRELLA WITH RAIN DROPS
☕HOT BEVERAGE
⚽SOCCER BALL
⚾BASEBALL
✈AIRPLANE
✉ENVELOPE
✎LOWER RIGHT PENCIL
✏PENCIL
✐UPPER RIGHT PENCIL
✑WHITE NIB
✒BLACK NIB
🎤🎤MICROPHONE
🎥🎥MOVIE CAMERA
🎦🎦CINEMA
🎧🎧HEADPHONE
🏠🏠HOUSE BUILDING
🏡🏡HOUSE WITH GARDEN
🏢🏢OFFICE BUILDING
📓📓NOTEBOOK
📔📔NOTEBOOK WITH DECORATIVE COVER
📕📕CLOSED BOOK
📖📖OPEN BOOK
📗📗GREEN BOOK
📘📘BLUE BOOK
📙📙ORANGE BOOK
📚📚BOOKS
📜📜SCROLL
📧📧E-MAIL SYMBOL
📨📨INCOMING ENVELOPE
📩📩ENVELOPE WITH DOWNWARDS ARROW ABOVE
📪📪CLOSED MAILBOX WITH LOWERED FLAG
📫📫CLOSED MAILBOX WITH RAISED FLAG
🔊🔊SPEAKER WITH THREE SOUND WAVES
🔋🔋BATTERY
🔌🔌ELECTRIC PLUG
🔍🔍LEFT-POINTING MAGNIFYING GLASS
🔎🔎RIGHT-POINTING MAGNIFYING GLASS
🔏🔏LOCK WITH INK PEN
🔐🔐CLOSED LOCK WITH KEY
🔑🔑KEY
🔒🔒LOCK
🔓🔓OPEN LOCK
🔔🔔BELL
🕐🕐CLOCK FACE ONE OCLOCK
🕑🕑CLOCK FACE TWO OCLOCK
🕒🕒CLOCK FACE THREE OCLOCK
🕓🕓CLOCK FACE FOUR OCLOCK
🕔🕔CLOCK FACE FIVE OCLOCK
🕕🕕CLOCK FACE SIX OCLOCK
🕖🕖CLOCK FACE SEVEN OCLOCK
🕗🕗CLOCK FACE EIGHT OCLOCK
🕘🕘CLOCK FACE NINE OCLOCK
🕙🕙CLOCK FACE TEN OCLOCK
🕚🕚CLOCK FACE ELEVEN OCLOCK
🕛🕛CLOCK FACE TWELVE OCLOCK

その他アイコン系

文字文字参照説明
℡TELEPHONE SIGN
℻FACSIMILE SIGN
☘SHAMROCK
☠SKULL AND CROSSBONES
☹WHITE FROWNING FACE
☺WHITE SMILING FACE
☻BLACK SMILING FACE
✊RAISED FIST
✋RAISED HAND
✌VICTORY HAND
✍WRITING HAND

いかがでしょう。特に、矢印やマーカー的に使えるものは、CTAボタンや見出し、区切り線などの装飾にうまく使えば効果を出せそうです。

しかも、画像を使わず、標準フォントだけで大丈夫なので、ページ表示が重くならないし、変更も楽というメリットがあります。

これ、機種依存文字じゃないの? と気にする方もいるでしょう。でもこれは、文字コードで定められているものなのです。実際のところは「UTF-8の機種依存文字」なのですが、メールなどと違ってWebページではどの文字コードで表示するかをこちらで指定できるので、気にする必要は少ないですね。

注意点

ただし、注意点があります。

まず、Webサイトの文字コードがSJISやEUCの場合、ここで紹介する文字をアイコン的に使うことはできません。

また、デバイスや環境(ブラウザで設定しているフォント)によっては、表示されない文字がある場合があります。

また、アイコン的に使う以外の本来の意味をもつ文字は、装飾用には使わないほうがいいです。というのも、視覚障碍者さんがスクリーンリーダーで読むときに、混乱してしまうからです。

ちなみに、アイコン的な使い方をできる専用のフォントもありますが、それも同様にアクセシビリティの観点から使わないほうがいいです。

ここで紹介したのは、Unicodeで定義されている絵文字や文字の、ごく一部です。ほかにもいろいろありますので、これらの文字コードを探せるページのURLを紹介しておきますね。お好きなものを探してみてください。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]