無料で使用できる!450種類以上のラインアイコン「LineIcons」

 
450種類以上のラインアイコンをアイコンフォントとして無料で使用できる「LineIcons」の紹介です。ラインアイコンはシャープな印象で大きいサイズで使用してもボテッとしないデザインです。また、アイコンはSVGでダウンロードすることも可能です。

LineIcons

使用方法は他のアイコンフォントと同様でCSSを読み込みclassの指定をするだけです。LineIconsで用意されてるCDNリンクを読み込みます。

html
<link rel="stylesheet" href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css">

次にIconsページ から表示させたいアイコンをクリックしてコードをコピペするだけです。

html
<i class="lni-twitter-original"></i>

ソーシャル・PC系アイコン


ビジネス系アイコン


ブログ系アイコン


ショップ系アイコン


統一感のあるキレイなアイコンですね。 商用利用も可能なので興味のある方はチェックしてみてください。以上、無料で使用できる!450種類以上のラインアイコンセット「LineIcons」


  • 500種類以上のアイコンフォントとCSSのツールキット「Fontisto」
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
  • アイコンフォント「FontAwesome」の使い方
RELATED POSTS
  • 【jQuery】商品一覧ページなどで効果的に使える「Product Preview Slider」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • レスポンシブのチェックに役立つサービス「Resizer」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • CSSグリッドレイアウトのコードを生成できるツール「Griddy」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」