CRG-22 — ICON MOTION

アイコンアニメーション24点在庫あり

ベルが鳴り、フォルダが開く。ホバーで命が宿るSVGラインアイコン。すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-22-001

Bell

ベル(鳴る+火花)Bell Ring

.cg-ic-bell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #C28A00;
  transition: background .25s, color .25s;
}
.cg-ic-bell:hover, .cg-ic-bell:focus-visible { background: rgba(242, 183, 7, .16); outline: none; }
.cg-ic-bell svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-bell b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-bell .body, .cg-ic-bell .cl { transform-box: fill-box; transform-origin: 50% 0; }
.cg-ic-bell .sp { stroke: #F2B707; opacity: 0; }
.cg-ic-bell:hover .body, .cg-ic-bell:focus-visible .body { animation: cg-ic-bell-swing 1s ease-in-out infinite; }
.cg-ic-bell:hover .cl, .cg-ic-bell:focus-visible .cl { animation: cg-ic-bell-cl 1s ease-in-out infinite; }
.cg-ic-bell:hover .sp, .cg-ic-bell:focus-visible .sp { animation: cg-ic-bell-sp 1s ease infinite; }
@keyframes cg-ic-bell-swing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  45% { transform: rotate(-11deg); }
  70% { transform: rotate(6deg); }
  85% { transform: rotate(-3deg); }
}
@keyframes cg-ic-bell-cl {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
}
@keyframes cg-ic-bell-sp {
  0%, 10% { opacity: 0; transform: scale(.6); }
  30%, 55% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.15); }
}

<span class="cg-ic-bell" tabindex="0" role="img" aria-label="通知"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="sp"><path d="M2.8 9.5H1"/><path d="M4.3 5.5 3 4.2"/><path d="M21.2 9.5H23"/><path d="M19.7 5.5 21 4.2"/></g><g class="body"><path d="M6 18v-7a6 6 0 0 1 12 0v7"/><path d="M4 18h16"/></g><path class="cl" d="M10 21a2 2 0 0 0 4 0"/></svg><b>Bell</b></span>

GROSS WT. 1940 B ORIGINAL

CRG-22-002

Heart

ハート(鼓動+塗り)Heart Beat

.cg-ic-heart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #D64472;
  transition: background .25s, color .25s;
}
.cg-ic-heart:hover, .cg-ic-heart:focus-visible { background: rgba(232, 85, 126, .13); outline: none; }
.cg-ic-heart svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cg-ic-heart b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-heart .ht {
  fill: #E8557E;
  fill-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill-opacity .3s, stroke .3s;
}
.cg-ic-heart:hover .ht, .cg-ic-heart:focus-visible .ht {
  fill-opacity: 1;
  stroke: #E8557E;
  animation: cg-ic-heart-beat 1.1s ease-in-out infinite;
}
/* ドクン、ドクン。二段階の鼓動 */
@keyframes cg-ic-heart-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.22); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  56% { transform: scale(1); }
}

<span class="cg-ic-heart" tabindex="0" role="img" aria-label="いいね"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="ht" d="M12 21C7 16.5 3 13.2 3 8.8 3 5.6 5.5 4 7.8 4c1.7 0 3.2.9 4.2 2.4C13 4.9 14.5 4 16.2 4 18.5 4 21 5.6 21 8.8c0 4.4-4 7.7-9 12.2Z"/></svg><b>Heart</b></span>

GROSS WT. 1372 B ORIGINAL

CRG-22-003

Folder

フォルダ(書類が飛び出す)Folder Pop

.cg-ic-folder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #4A6FA5;
  transition: background .25s, color .25s;
}
.cg-ic-folder:hover, .cg-ic-folder:focus-visible { background: rgba(74, 111, 165, .14); outline: none; }
.cg-ic-folder svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-folder b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-folder .body { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.cg-ic-folder .paper {
  stroke: #4A6FA5;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(6px) scaleY(0);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
.cg-ic-folder:hover .paper, .cg-ic-folder:focus-visible .paper { transform: translateY(0) scaleY(1); opacity: 1; }
.cg-ic-folder:hover .body, .cg-ic-folder:focus-visible .body { transform: rotate(-4deg); }

<span class="cg-ic-folder" tabindex="0" role="img" aria-label="フォルダ"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="paper"><rect x="9" y="1.8" width="6.5" height="6" rx="1"/><path d="M11 4h2.5M11 5.8h2.5"/></g><path class="body" d="M20 20a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 4.9A2 2 0 0 0 7.93 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"/></svg><b>Folder</b></span>

GROSS WT. 1518 B ORIGINAL

CRG-22-004

Home

ホーム(跳ねる+ドア)Home Bounce

.cg-ic-home {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #D9540E;
  transition: background .25s, color .25s;
}
.cg-ic-home:hover, .cg-ic-home:focus-visible { background: rgba(232, 89, 12, .13); outline: none; }
.cg-ic-home svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-home b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-home .hs { transform-box: fill-box; transform-origin: 50% 100%; }
.cg-ic-home .door {
  stroke: #E8590C;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1) .12s;
}
.cg-ic-home:hover .hs, .cg-ic-home:focus-visible .hs { animation: cg-ic-home-jump 1.3s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.cg-ic-home:hover .door, .cg-ic-home:focus-visible .door { transform: scaleY(1); }
@keyframes cg-ic-home-jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.06, .92); }
  40% { transform: translateY(-3px) scale(.97, 1.04); }
  62% { transform: translateY(0) scale(1.03, .96); }
  78% { transform: translateY(0) scale(1, 1); }
}

<span class="cg-ic-home" tabindex="0" role="img" aria-label="ホーム"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="hs"><path d="m3 11 9-8 9 8"/><path d="M5 9.5V21h14V9.5"/><path class="door" d="M10 21v-6h4v6"/></g></svg><b>Home</b></span>

GROSS WT. 1559 B ORIGINAL

CRG-22-005

Trash

ゴミ箱(フタが開く)Trash Open

.cg-ic-trash {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #C0392B;
  transition: background .25s, color .25s;
}
.cg-ic-trash:hover, .cg-ic-trash:focus-visible { background: rgba(192, 57, 43, .12); outline: none; }
.cg-ic-trash svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-trash b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-trash .lid {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-ic-trash .tin { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s ease; }
.cg-ic-trash:hover .lid, .cg-ic-trash:focus-visible .lid { transform: rotate(-22deg) translateY(-2.5px); stroke: #C0392B; }
.cg-ic-trash:hover .tin, .cg-ic-trash:focus-visible .tin { transform: rotate(2.5deg); }

<span class="cg-ic-trash" tabindex="0" role="img" aria-label="削除"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="lid"><path d="M3.5 6.5h17"/><path d="M9 6.5v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></g><g class="tin"><path d="m5.5 6.5 1 14.5h11l1-14.5"/><path d="M10 10.5v7M14 10.5v7"/></g></svg><b>Trash</b></span>

GROSS WT. 1329 B ORIGINAL

CRG-22-006

Settings

設定ギア(回転)Gear Spin

.cg-ic-gear {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #5E5AA0;
  transition: background .25s, color .25s;
}
.cg-ic-gear:hover, .cg-ic-gear:focus-visible { background: rgba(94, 90, 160, .14); outline: none; }
.cg-ic-gear svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-gear b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-gear .cog { transform-box: fill-box; transform-origin: center; }
.cg-ic-gear:hover .cog, .cg-ic-gear:focus-visible .cog { animation: cg-ic-gear-spin 1.8s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes cg-ic-gear-spin { to { transform: rotate(180deg); } }

<span class="cg-ic-gear" tabindex="0" role="img" aria-label="設定"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="cog"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1"/></g></svg><b>Settings</b></span>

GROSS WT. 1101 B ORIGINAL

CRG-22-007

Search

検索(スキャン移動)Search Scan

.cg-ic-search {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #1F87A8;
  transition: background .25s, color .25s;
}
.cg-ic-search:hover, .cg-ic-search:focus-visible { background: rgba(47, 163, 196, .15); outline: none; }
.cg-ic-search svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-search b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-search .mg { transform-box: fill-box; transform-origin: 35% 35%; }
.cg-ic-search:hover .mg, .cg-ic-search:focus-visible .mg { animation: cg-ic-search-scan 1.6s ease-in-out infinite; }
/* 何かを探すように左右を見回す */
@keyframes cg-ic-search-scan {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(2px, -1.5px) scale(1.08); }
  55% { transform: translate(-2px, 1px) scale(1.08); }
  80% { transform: translate(0, 0) scale(1); }
}

<span class="cg-ic-search" tabindex="0" role="img" aria-label="検索"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="mg"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m15.5 15.5 5.5 5.5"/></g></svg><b>Search</b></span>

GROSS WT. 1238 B ORIGINAL

CRG-22-008

Mail

メール(封が開いて手紙)Mail Open

.cg-ic-mail {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #D9540E;
  transition: background .25s, color .25s;
}
.cg-ic-mail:hover, .cg-ic-mail:focus-visible { background: rgba(232, 89, 12, .12); outline: none; }
.cg-ic-mail svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-mail b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-mail .flap { transform-box: fill-box; transform-origin: 50% 0; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.cg-ic-mail .ltr {
  stroke: #E8590C;
  opacity: 0;
  transform: translateY(3px);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) .1s, opacity .2s .1s;
}
.cg-ic-mail:hover .flap, .cg-ic-mail:focus-visible .flap { transform: scaleY(-.85); }
.cg-ic-mail:hover .ltr, .cg-ic-mail:focus-visible .ltr { transform: translateY(-4.5px); opacity: 1; }

<span class="cg-ic-mail" tabindex="0" role="img" aria-label="メール"><svg viewBox="0 0 24 24" aria-hidden="true"><rect class="ltr" x="8.5" y="8" width="7" height="5" rx="1"/><rect class="env" x="2.5" y="5" width="19" height="14" rx="2"/><path class="flap" d="m3 6.5 9 7 9-7"/></svg><b>Mail</b></span>

GROSS WT. 1331 B ORIGINAL

CRG-22-009

Download

ダウンロード(矢印が落ちる)Download Drop

.cg-ic-dl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #4A6FA5;
  transition: background .25s, color .25s;
}
.cg-ic-dl:hover, .cg-ic-dl:focus-visible { background: rgba(74, 111, 165, .14); outline: none; }
.cg-ic-dl svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-dl b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-dl:hover .arr, .cg-ic-dl:focus-visible .arr { animation: cg-ic-dl-drop .9s ease-in infinite; stroke: #4A6FA5; }
.cg-ic-dl:hover .tray, .cg-ic-dl:focus-visible .tray { animation: cg-ic-dl-tray .9s ease infinite; }
@keyframes cg-ic-dl-drop {
  0% { transform: translateY(-4px); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translateY(2.5px); opacity: 1; }
  80%, 100% { transform: translateY(4px); opacity: 0; }
}
@keyframes cg-ic-dl-tray {
  0%, 55% { transform: translateY(0); }
  68% { transform: translateY(1.6px); }
  85%, 100% { transform: translateY(0); }
}

<span class="cg-ic-dl" tabindex="0" role="img" aria-label="ダウンロード"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="arr"><path d="M12 3.5V14"/><path d="m7.5 10 4.5 4.5L16.5 10"/></g><path class="tray" d="M4 17v2.5A1.5 1.5 0 0 0 5.5 21h13a1.5 1.5 0 0 0 1.5-1.5V17"/></svg><b>Download</b></span>

GROSS WT. 1422 B ORIGINAL

CRG-22-010

Like

いいね(グッと押す)Thumbs Up

.cg-ic-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #D9540E;
  transition: background .25s, color .25s;
}
.cg-ic-thumb:hover, .cg-ic-thumb:focus-visible { background: rgba(232, 89, 12, .13); outline: none; }
.cg-ic-thumb svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-thumb b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-thumb .th { transform-box: fill-box; transform-origin: 15% 85%; }
.cg-ic-thumb .ray { stroke: #E8590C; opacity: 0; }
.cg-ic-thumb:hover .th, .cg-ic-thumb:focus-visible .th { animation: cg-ic-thumb-pump 1.2s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.cg-ic-thumb:hover .ray, .cg-ic-thumb:focus-visible .ray { animation: cg-ic-thumb-ray 1.2s ease infinite; }
@keyframes cg-ic-thumb-pump {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-14deg) translateY(-1px); }
  60% { transform: rotate(0); }
}
@keyframes cg-ic-thumb-ray {
  0%, 15% { opacity: 0; transform: scale(.7); }
  35%, 55% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.1); }
}

<span class="cg-ic-thumb" tabindex="0" role="img" aria-label="いいね"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="ray"><path d="M9.5 2.6V1"/><path d="M6 4 4.8 2.8"/><path d="M13 2.8l.9-1.4"/></g><g class="th"><path d="M7 11v10"/><path d="M7 11l4.2-7.2A2 2 0 0 1 13 3c1.1 0 2 .9 2 2v4h4.4a2 2 0 0 1 2 2.4l-1.4 7A2 2 0 0 1 18 20H7"/></g></svg><b>Like</b></span>

GROSS WT. 1617 B ORIGINAL

CRG-22-011

Sound

スピーカー(音波が広がる)Speaker Waves

.cg-ic-spk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #1F87A8;
  transition: background .25s, color .25s;
}
.cg-ic-spk:hover, .cg-ic-spk:focus-visible { background: rgba(47, 163, 196, .15); outline: none; }
.cg-ic-spk svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-spk b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-spk .body { transform-box: fill-box; transform-origin: center; }
.cg-ic-spk .w1, .cg-ic-spk .w2 { stroke: #2FA3C4; opacity: 0; transform-box: fill-box; transform-origin: 0 50%; }
.cg-ic-spk:hover .body, .cg-ic-spk:focus-visible .body { animation: cg-ic-spk-pump 1.2s ease-in-out infinite; }
.cg-ic-spk:hover .w1, .cg-ic-spk:focus-visible .w1 { animation: cg-ic-spk-wave 1.2s ease infinite; }
.cg-ic-spk:hover .w2, .cg-ic-spk:focus-visible .w2 { animation: cg-ic-spk-wave 1.2s ease .18s infinite; }
@keyframes cg-ic-spk-pump { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } }
@keyframes cg-ic-spk-wave {
  0% { opacity: 0; transform: scale(.6); }
  25%, 65% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1.12); }
}

<span class="cg-ic-spk" tabindex="0" role="img" aria-label="音量"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="body" d="M4 9v6h4l6 5V4L8 9H4Z"/><path class="w1" d="M16.5 9.5a4 4 0 0 1 0 5"/><path class="w2" d="M19 7a8 8 0 0 1 0 10"/></svg><b>Sound</b></span>

GROSS WT. 1612 B ORIGINAL

CRG-22-012

Camera

カメラ(フォーカス+フラッシュ)Camera Snap

.cg-ic-cam {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #7A4FA0;
  transition: background .25s, color .25s;
}
.cg-ic-cam:hover, .cg-ic-cam:focus-visible { background: rgba(122, 79, 160, .14); outline: none; }
.cg-ic-cam svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-cam b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-cam .bd { transform-box: fill-box; transform-origin: center; }
.cg-ic-cam .lens { transform-box: fill-box; transform-origin: center; }
.cg-ic-cam .fl { stroke: #F2B707; opacity: 0; }
.cg-ic-cam:hover .bd, .cg-ic-cam:focus-visible .bd { animation: cg-ic-cam-tilt 1.4s ease infinite; }
.cg-ic-cam:hover .lens, .cg-ic-cam:focus-visible .lens { animation: cg-ic-cam-focus 1.4s ease infinite; }
.cg-ic-cam:hover .fl, .cg-ic-cam:focus-visible .fl { animation: cg-ic-cam-flash 1.4s ease infinite; }
@keyframes cg-ic-cam-tilt { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 45% { transform: rotate(0); } }
@keyframes cg-ic-cam-focus {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(.82); }
  45% { transform: scale(1.08); }
  60% { transform: scale(1); }
}
@keyframes cg-ic-cam-flash {
  0%, 40% { opacity: 0; transform: scale(.7); }
  50%, 62% { opacity: 1; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(1.1); }
}

<span class="cg-ic-cam" tabindex="0" role="img" aria-label="カメラ"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="fl"><path d="M21.5 3.2v-1.9M22.5 4.2h1.9M20.6 4.1l-1.3-1.3"/></g><g class="bd"><path d="M20.5 20h-17A1.5 1.5 0 0 1 2 18.5v-9A1.5 1.5 0 0 1 3.5 8H7l2-2.6h6L17 8h3.5A1.5 1.5 0 0 1 22 9.5v9a1.5 1.5 0 0 1-1.5 1.5Z"/><circle class="lens" cx="12" cy="13.5" r="3.8"/></g></svg><b>Camera</b></span>

GROSS WT. 1923 B ORIGINAL

CRG-22-013

Send

送信(紙飛行機+航跡)Send Plane

.cg-ic-send {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #4A6FA5;
  transition: background .25s, color .25s;
}
.cg-ic-send:hover, .cg-ic-send:focus-visible { background: rgba(74, 111, 165, .14); outline: none; }
.cg-ic-send svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-send b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-send .pl {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-ic-send .tr { stroke: #4A6FA5; opacity: 0; }
.cg-ic-send:hover .pl, .cg-ic-send:focus-visible .pl { transform: translate(1.5px, -1.5px) rotate(-14deg); stroke: #4A6FA5; }
.cg-ic-send:hover .tr, .cg-ic-send:focus-visible .tr { animation: cg-ic-send-trail 1s ease infinite; }
@keyframes cg-ic-send-trail {
  0% { opacity: 0; transform: translate(3px, -3px); }
  35%, 60% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-2.5px, 2.5px); }
}

<span class="cg-ic-send" tabindex="0" role="img" aria-label="送信"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="tr"><path d="M5.5 16.5 3 19"/><path d="M8.5 19.5 7 21"/></g><g class="pl"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4Z"/></g></svg><b>Send</b></span>

GROSS WT. 1439 B ORIGINAL

CRG-22-014

Save

ブックマーク(落ちて刺さる)Bookmark Drop

.cg-ic-bm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #C28A00;
  transition: background .25s, color .25s;
}
.cg-ic-bm:hover, .cg-ic-bm:focus-visible { background: rgba(242, 183, 7, .16); outline: none; }
.cg-ic-bm svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cg-ic-bm b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-bm .bm {
  fill: #F2B707;
  fill-opacity: 0;
  transition: fill-opacity .25s .15s, stroke .25s .15s;
}
.cg-ic-bm:hover .bm, .cg-ic-bm:focus-visible .bm {
  fill-opacity: 1;
  stroke: #C89000;
  animation: cg-ic-bm-drop .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cg-ic-bm-drop {
  0% { transform: translateY(-5px); }
  60% { transform: translateY(1.5px); }
  100% { transform: translateY(0); }
}

<span class="cg-ic-bm" tabindex="0" role="img" aria-label="ブックマーク"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="bm" d="M6.5 3h11v18l-5.5-4-5.5 4Z"/></svg><b>Save</b></span>

GROSS WT. 1114 B ORIGINAL

CRG-22-015

Star

星(スピン+ゴールド)Star Spin

.cg-ic-star {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #C28A00;
  transition: background .25s, color .25s;
}
.cg-ic-star:hover, .cg-ic-star:focus-visible { background: rgba(242, 183, 7, .16); outline: none; }
.cg-ic-star svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-star b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-star .st {
  fill: #F2B707;
  fill-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill-opacity .3s, stroke .3s;
}
.cg-ic-star .glit { stroke: #F2B707; opacity: 0; }
.cg-ic-star:hover .st, .cg-ic-star:focus-visible .st {
  fill-opacity: 1;
  stroke: #C89000;
  animation: cg-ic-star-spin .6s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-ic-star:hover .glit, .cg-ic-star:focus-visible .glit { animation: cg-ic-star-glit 1.4s ease infinite .2s; }
@keyframes cg-ic-star-spin {
  0% { transform: rotate(0) scale(1); }
  55% { transform: rotate(144deg) scale(1.25); }
  100% { transform: rotate(144deg) scale(1); }
}
@keyframes cg-ic-star-glit {
  0%, 15% { opacity: 0; transform: scale(.7); }
  35%, 55% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.1); }
}

<span class="cg-ic-star" tabindex="0" role="img" aria-label="お気に入り"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="glit"><path d="M4 4.5 2.8 3.3"/><path d="M20.5 19l1.2 1.2"/><path d="M21 4l1.2-1.2"/></g><path class="st" d="m12 2.5 2.9 5.9 6.5 1-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-1L12 2.5Z"/></svg><b>Star</b></span>

GROSS WT. 1717 B ORIGINAL

CRG-22-016

Calendar

カレンダー(予定が入る)Calendar Dots

.cg-ic-cal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #D9540E;
  transition: background .25s, color .25s;
}
.cg-ic-cal:hover, .cg-ic-cal:focus-visible { background: rgba(232, 89, 12, .12); outline: none; }
.cg-ic-cal svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-cal b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-cal .dots circle {
  fill: #E8590C;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-ic-cal:hover .dots circle, .cg-ic-cal:focus-visible .dots circle { transform: scale(1); }
.cg-ic-cal:hover .d2, .cg-ic-cal:focus-visible .d2 { transition-delay: .07s; }
.cg-ic-cal:hover .d3, .cg-ic-cal:focus-visible .d3 { transition-delay: .14s; }
.cg-ic-cal:hover .d4, .cg-ic-cal:focus-visible .d4 { transition-delay: .21s; }
.cg-ic-cal:hover .d5, .cg-ic-cal:focus-visible .d5 { transition-delay: .28s; }

<span class="cg-ic-cal" tabindex="0" role="img" aria-label="カレンダー"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9.5h18M8 3v4M16 3v4"/><g class="dots"><circle class="d1" cx="8" cy="14" r="1.3"/><circle class="d2" cx="12" cy="14" r="1.3"/><circle class="d3" cx="16" cy="14" r="1.3"/><circle class="d4" cx="8" cy="17.5" r="1.3"/><circle class="d5" cx="12" cy="17.5" r="1.3"/></g></svg><b>Calendar</b></span>

GROSS WT. 1596 B ORIGINAL

CRG-22-017

Clock

時計(針が巻き上がる)Clock Wind

.cg-ic-clock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #3A5A78;
  transition: background .25s, color .25s;
}
.cg-ic-clock:hover, .cg-ic-clock:focus-visible { background: rgba(58, 90, 120, .14); outline: none; }
.cg-ic-clock svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-clock b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-clock .mh, .cg-ic-clock .hh { transform-box: view-box; transform-origin: 12px 12px; }
.cg-ic-clock:hover .mh, .cg-ic-clock:focus-visible .mh { animation: cg-ic-clock-spin 1s cubic-bezier(.45, .05, .55, .95) infinite; stroke: #E8590C; }
.cg-ic-clock:hover .hh, .cg-ic-clock:focus-visible .hh { animation: cg-ic-clock-spin 12s linear infinite; }
@keyframes cg-ic-clock-spin { to { transform: rotate(360deg); } }

<span class="cg-ic-clock" tabindex="0" role="img" aria-label="時計"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path class="mh" d="M12 12V6.8"/><path class="hh" d="M12 12h3.6"/></svg><b>Clock</b></span>

GROSS WT. 1175 B ORIGINAL

CRG-22-018

Wi-Fi

Wi-Fi(電波が立つ)Wifi Up

.cg-ic-wifi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #1F87A8;
  transition: background .25s, color .25s;
}
.cg-ic-wifi:hover, .cg-ic-wifi:focus-visible { background: rgba(47, 163, 196, .15); outline: none; }
.cg-ic-wifi svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-wifi b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-wifi .a0 { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.cg-ic-wifi .a1, .cg-ic-wifi .a2, .cg-ic-wifi .a3 { transform-box: fill-box; transform-origin: 50% 100%; }
.cg-ic-wifi:hover .a0, .cg-ic-wifi:focus-visible .a0 { animation: cg-ic-wifi-dot 1.6s ease infinite; fill: #2FA3C4; }
.cg-ic-wifi:hover .a1, .cg-ic-wifi:focus-visible .a1 { animation: cg-ic-wifi-arc 1.6s ease infinite .12s; stroke: #2FA3C4; }
.cg-ic-wifi:hover .a2, .cg-ic-wifi:focus-visible .a2 { animation: cg-ic-wifi-arc 1.6s ease infinite .26s; stroke: #2FA3C4; }
.cg-ic-wifi:hover .a3, .cg-ic-wifi:focus-visible .a3 { animation: cg-ic-wifi-arc 1.6s ease infinite .4s; stroke: #2FA3C4; }
@keyframes cg-ic-wifi-dot { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.5); } 28% { transform: scale(1); } }
@keyframes cg-ic-wifi-arc {
  0%, 6% { opacity: 1; transform: scale(1); }
  14% { opacity: .15; transform: scale(.9); }
  34%, 100% { opacity: 1; transform: scale(1); }
}

<span class="cg-ic-wifi" tabindex="0" role="img" aria-label="Wi-Fi"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="a3" d="M2.5 9a15 15 0 0 1 19 0"/><path class="a2" d="M5.5 12.5a10.5 10.5 0 0 1 13 0"/><path class="a1" d="M8.7 16a6 6 0 0 1 6.6 0"/><circle class="a0" cx="12" cy="19.5" r="1.4"/></svg><b>Wi-Fi</b></span>

GROSS WT. 1845 B ORIGINAL

CRG-22-019

View

目(まばたき+視線)Eye Blink

.cg-ic-eye {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #5E5AA0;
  transition: background .25s, color .25s;
}
.cg-ic-eye:hover, .cg-ic-eye:focus-visible { background: rgba(94, 90, 160, .14); outline: none; }
.cg-ic-eye svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-eye b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-eye .eye { transform-box: fill-box; transform-origin: center; }
.cg-ic-eye .pp { transform-box: fill-box; transform-origin: center; }
.cg-ic-eye:hover .eye, .cg-ic-eye:focus-visible .eye { animation: cg-ic-eye-blink 2.6s ease infinite; }
.cg-ic-eye:hover .pp, .cg-ic-eye:focus-visible .pp { animation: cg-ic-eye-look 2.6s ease infinite; }
/* まばたき2回+視線が左右に泳ぐ */
@keyframes cg-ic-eye-blink {
  0%, 6%, 14%, 52%, 60%, 100% { transform: scaleY(1); }
  10% { transform: scaleY(.08); }
  56% { transform: scaleY(.08); }
}
@keyframes cg-ic-eye-look {
  0%, 14% { transform: translateX(0); }
  24%, 40% { transform: translateX(2.2px); }
  50% { transform: translateX(0); }
  64%, 82% { transform: translateX(-2.2px); }
  94%, 100% { transform: translateX(0); }
}

<span class="cg-ic-eye" tabindex="0" role="img" aria-label="表示"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="eye"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle class="pp" cx="12" cy="12" r="3"/></g></svg><b>View</b></span>

GROSS WT. 1600 B ORIGINAL

CRG-22-020

Unlock

南京錠(開錠)Lock Open

.cg-ic-lock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #2F8A59;
  transition: background .25s, color .25s;
}
.cg-ic-lock:hover, .cg-ic-lock:focus-visible { background: rgba(58, 167, 109, .14); outline: none; }
.cg-ic-lock svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-lock b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-lock .sh {
  transform-box: fill-box;
  transform-origin: 0 100%;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), stroke .3s;
}
.cg-ic-lock .kh { fill: currentColor; stroke: none; transition: fill .3s; }
.cg-ic-lock .lb rect { transition: stroke .3s; }
.cg-ic-lock:hover .sh, .cg-ic-lock:focus-visible .sh { transform: translateY(-2.5px) rotate(-14deg); stroke: #3AA76D; }
.cg-ic-lock:hover .kh, .cg-ic-lock:focus-visible .kh { fill: #3AA76D; }
.cg-ic-lock:hover .lb rect, .cg-ic-lock:focus-visible .lb rect { stroke: #3AA76D; }

<span class="cg-ic-lock" tabindex="0" role="img" aria-label="ロック解除"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="sh" d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/><g class="lb"><rect x="4.5" y="10.5" width="15" height="10" rx="2"/><circle class="kh" cx="12" cy="15.5" r="1.4"/></g></svg><b>Unlock</b></span>

GROSS WT. 1384 B ORIGINAL

CRG-22-021

Refresh

リロード(ぐるっと一回転)Refresh Spin

.cg-ic-ref {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #4A6FA5;
  transition: background .25s, color .25s;
}
.cg-ic-ref:hover, .cg-ic-ref:focus-visible { background: rgba(74, 111, 165, .14); outline: none; }
.cg-ic-ref svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-ref b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-ref .rf { transform-box: fill-box; transform-origin: center; }
.cg-ic-ref:hover .rf, .cg-ic-ref:focus-visible .rf { animation: cg-ic-ref-spin .7s cubic-bezier(.45, .05, .55, .95); stroke: #4A6FA5; }
@keyframes cg-ic-ref-spin { to { transform: rotate(360deg); } }

<span class="cg-ic-ref" tabindex="0" role="img" aria-label="更新"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="rf"><path d="M20.5 12a8.5 8.5 0 1 1-2.6-6.1"/><path d="M20.5 3.5v4h-4"/></g></svg><b>Refresh</b></span>

GROSS WT. 1032 B ORIGINAL

CRG-22-022

Cart

カート(弾む+バッジ追加)Cart Bounce

.cg-ic-cart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #B54708;
  transition: background .25s, color .25s;
}
.cg-ic-cart:hover, .cg-ic-cart:focus-visible { background: rgba(181, 71, 8, .13); outline: none; }
.cg-ic-cart svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-cart b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-cart .body { transform-box: fill-box; transform-origin: 50% 100%; }
.cg-ic-cart .w1, .cg-ic-cart .w2 { transform-box: fill-box; transform-origin: center; }
.cg-ic-cart .badge {
  stroke: #2F8A59;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.cg-ic-cart:hover .body, .cg-ic-cart:focus-visible .body { animation: cg-ic-cart-jolt .5s cubic-bezier(.34, 1.56, .64, 1); }
.cg-ic-cart:hover .w1, .cg-ic-cart:focus-visible .w1,
.cg-ic-cart:hover .w2, .cg-ic-cart:focus-visible .w2 { animation: cg-ic-cart-spin .5s linear; }
.cg-ic-cart:hover .badge, .cg-ic-cart:focus-visible .badge { animation: cg-ic-cart-badge .45s cubic-bezier(.34, 1.56, .64, 1) .15s forwards; }
@keyframes cg-ic-cart-jolt {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-6deg); }
  60% { transform: rotate(3deg); }
}
@keyframes cg-ic-cart-spin { to { transform: rotate(180deg); } }
@keyframes cg-ic-cart-badge { to { transform: scale(1); opacity: 1; } }

<span class="cg-ic-cart" tabindex="0" role="img" aria-label="カートに追加"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="body"><path d="M3 4h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.6L21 8H6"/><circle class="w1" cx="9.5" cy="20" r="1.4"/><circle class="w2" cx="17" cy="20" r="1.4"/></g><g class="badge"><circle cx="19" cy="5" r="3.6"/><path d="M19 3.4v3.2M17.4 5h3.2"/></g></svg><b>Cart</b></span>

GROSS WT. 1946 B ORIGINAL

CRG-22-023

共有(ノードが接続される)Share Connect

.cg-ic-share {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #2F6FA8;
  transition: background .25s, color .25s;
}
.cg-ic-share:hover, .cg-ic-share:focus-visible { background: rgba(47, 111, 168, .13); outline: none; }
.cg-ic-share svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-ic-share b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-share .n1 { fill: currentColor; stroke: none; }
.cg-ic-share .n2, .cg-ic-share .n3 {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.cg-ic-share .l1, .cg-ic-share .l2 { stroke-dasharray: 10; stroke-dashoffset: 10; }
.cg-ic-share:hover .l1, .cg-ic-share:focus-visible .l1 { animation: cg-ic-share-draw .3s ease forwards; }
.cg-ic-share:hover .l2, .cg-ic-share:focus-visible .l2 { animation: cg-ic-share-draw .3s ease .12s forwards; }
.cg-ic-share:hover .n2, .cg-ic-share:focus-visible .n2 { animation: cg-ic-share-pop .35s cubic-bezier(.34, 1.56, .64, 1) .25s forwards; }
.cg-ic-share:hover .n3, .cg-ic-share:focus-visible .n3 { animation: cg-ic-share-pop .35s cubic-bezier(.34, 1.56, .64, 1) .37s forwards; }
@keyframes cg-ic-share-draw { to { stroke-dashoffset: 0; } }
@keyframes cg-ic-share-pop { to { transform: scale(1); } }

<span class="cg-ic-share" tabindex="0" role="img" aria-label="共有"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="l1" d="M8.3 10.7 15.7 6.8"/><path class="l2" d="M8.3 13.3 15.7 17.2"/><circle class="n1" cx="6" cy="12" r="2.6"/><circle class="n2" cx="18" cy="5.5" r="2.6"/><circle class="n3" cx="18" cy="18.5" r="2.6"/></svg><b>Share</b></span>

GROSS WT. 1786 B ORIGINAL

CRG-22-024

Done

チェック(円とチェックが描かれる)Check Draw

.cg-ic-check {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #C9C5BA;
  transition: background .25s, color .25s;
}
.cg-ic-check:hover, .cg-ic-check:focus-visible { background: rgba(47, 138, 89, .13); outline: none; }
.cg-ic-check svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-ic-check b { font-size: 11.5px; font-weight: 700; color: #2A2622; }
.cg-ic-check .ring {
  stroke-dasharray: 57;
  stroke-dashoffset: 57;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}
.cg-ic-check .tick { stroke-dasharray: 13; stroke-dashoffset: 13; }
.cg-ic-check:hover .ring, .cg-ic-check:focus-visible .ring { animation: cg-ic-check-ring .4s ease forwards; stroke: #2F8A59; }
.cg-ic-check:hover .tick, .cg-ic-check:focus-visible .tick { animation: cg-ic-check-tick .3s ease .35s forwards; stroke: #2F8A59; }
@keyframes cg-ic-check-ring { to { stroke-dashoffset: 0; } }
@keyframes cg-ic-check-tick { to { stroke-dashoffset: 0; } }

<span class="cg-ic-check" tabindex="0" role="img" aria-label="完了にする"><svg viewBox="0 0 24 24" aria-hidden="true"><circle class="ring" cx="12" cy="12" r="9"/><path class="tick" d="m7.5 12.5 3 3 6-6.5"/></svg><b>Done</b></span>

GROSS WT. 1386 B ORIGINAL

アイコンアニメーション24点 在庫あり