商用利用無料！UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic

Freebies

Post on:2021年5月10日

Iconicアイコンの特徴

Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。

Iconic

アイコンは26のカテゴリに、全160種類。
24pxグリッドに基づくピクセルパーフェクトなデザイン。
アイコンのストロークは、1.5px。
ベクターのSVGアイコン。
Vue, Reactライブラリを介して利用できます。
ライセンスはWTFPLで、個人でも商用プロジェクトでも無料でやりたいことに使用できます。

Iconicアイコンの使い方

Iconicのアイコンを使用するのは簡単です。
アイコンを選択し、「Download」または「Copy」ボタンをクリックするだけです。
※要メールアドレス登録（無料）

Arrow Right -Iconic

SVGのコードはHTMLに直接記述できます。

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M19 12H4.75" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

</svg>

Vue.js

npmから@iconicicons/vueまたは@iconicicons/vue3をインストールします。

npm install @iconicicons/vue // for Vue 2
npm install @iconicicons/vue3 // for Vue 3

1 2	npm install @iconicicons/vue // for Vue 2 npm install @iconicicons/vue3 // for Vue 3

これで、アイコンをVueコンポーネントとしてインポートできます。

<template>
  <div>
    <BatteryIcon />
    <p>...</p>
  </div>
</template>

<script>
import { BatteryIcon } from '@iconicicons/vue'

export default {
  components: { BatteryIcon }
}
</script>

<div>

</div>

</template>

import { BatteryIcon } from '@iconicicons/vue'

export default {

components: { BatteryIcon }

}

</script>

React

npmから@iconicicons/reactをインストールします。

npm install @iconicicons/react

1	npm install @iconicicons/react

これで、アイコンをReactコンポーネントとしてインポートできます。

import { BatteryIcon } from '@iconicicons/react'

function MyComponent() {
  return (
    <div>
      <BatteryIcon />
      <p>...</p>
    </div>
  )
}