Convert Figma logo to code with AI

ryanoasis logovim-devicons

Adds file type icons to Vim plugins such as: NERDTree, vim-airline, CtrlP, unite, Denite, lightline, vim-startify and many more

5,753
268
5,753
69

Top Related Projects

16,371

An emoji guide for your commit messages. 😜

10,891

Set of icons representing programming languages, designing & development tools

Devicons - An iconic font made for developers

A scalable set of icons handcrafted with <3 by GitHub

The iconic SVG, font, and CSS toolkit

25,566

Simply beautiful open-source icons

Quick Overview

Vim-devicons is a plugin that adds file type icons to Vim plugins such as NERDTree, vim-airline, CtrlP, unite, Denite, lightline, vim-startify, and flagship. It provides a vast array of icons for various file types and extensions, enhancing the visual appeal and readability of Vim file explorers and status lines.

Pros

  • Enhances visual organization of files in Vim
  • Supports a wide range of Vim plugins
  • Customizable icon set
  • Regular updates and active community support

Cons

  • Requires a patched font (Nerd Fonts) for proper display
  • May slow down Vim startup time slightly
  • Some users may find the icons distracting
  • Occasional compatibility issues with certain color schemes

Getting Started

  1. Install a patched font from Nerd Fonts.
  2. Add the following to your Vim configuration file (e.g., .vimrc):
" Enable vim-devicons
Plug 'ryanoasis/vim-devicons'

" Load the plugin
call plug#end()

" Set encoding to UTF-8
set encoding=UTF-8

" Enable file type detection
filetype plugin on

" Configure NERDTree (if using)
let g:NERDTreeGitStatusWithFlags = 1
let g:WebDevIconsUnicodeDecorateFolderNodes = 1
let g:NERDTreeGitStatusNodeColorization = 1
  1. Restart Vim and run :PlugInstall to install the plugin.
  2. Ensure your terminal emulator is using the patched font.

After installation, you should see icons next to file names in supported plugins like NERDTree, vim-airline, and others.

Competitor Comparisons

16,371

An emoji guide for your commit messages. 😜

Pros of gitmoji

  • Broader application: Can be used in commit messages, pull requests, and other Git-related contexts
  • Standardized emoji set: Provides a consistent set of emojis for various commit types
  • Web-based interface: Offers an easy-to-use web app for emoji selection

Cons of gitmoji

  • Limited to Git: Focused solely on Git-related usage, unlike vim-devicons' broader scope
  • Learning curve: Requires memorization of emoji meanings for effective use
  • Potential clutter: Excessive use of emojis in commit messages may reduce readability

Code comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

gitmoji:

git commit -m ":sparkles: Add new feature"
git commit -m ":bug: Fix critical bug"
git commit -m ":recycle: Refactor code"

Both projects enhance visual representation in development workflows, but they serve different purposes. vim-devicons focuses on adding icons to various Vim plugins and file types, while gitmoji standardizes emoji usage in Git commit messages and related contexts. The choice between them depends on the specific needs of the developer and their preferred development environment.

10,891

Set of icons representing programming languages, designing & development tools

Pros of devicon

  • Broader application support beyond Vim
  • Larger icon set with more file types and technologies covered
  • More active development and frequent updates

Cons of devicon

  • Requires more setup and configuration for use in specific applications
  • May have higher resource usage due to larger icon set

Code Comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

devicon:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
<i class="devicon-javascript-plain"></i>
<i class="devicon-python-plain"></i>

Key Differences

  1. Focus: vim-devicons is specifically tailored for Vim and related plugins, while devicon is a more general-purpose icon library.

  2. Integration: vim-devicons integrates seamlessly with Vim and popular plugins, whereas devicon requires manual integration in various projects.

  3. Customization: vim-devicons offers Vim-specific customization options, while devicon provides more flexibility for use in different environments.

  4. Community: vim-devicons has a dedicated Vim user community, while devicon caters to a broader range of developers across different platforms.

  5. Usage: vim-devicons is primarily used through Vim configuration, while devicon is typically included as a CSS library in web projects.

Devicons - An iconic font made for developers

Pros of devicons

  • Broader application: Not limited to Vim, can be used in various web projects
  • Larger icon set: Includes more icons for different file types and technologies
  • Easier integration: Can be used with CSS classes or as a web font

Cons of devicons

  • Less frequently updated: Last update was several years ago
  • Not specifically optimized for text editors or IDEs
  • Lacks some Vim-specific features and integrations

Code comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

devicons:

<link rel="stylesheet" href="devicons.css">
<i class="devicons devicons-github"></i>
<i class="devicons devicons-git"></i>

Summary

vim-devicons is tailored specifically for Vim and Neovim, offering seamless integration with popular plugins and a focus on enhancing the text editor experience. devicons, on the other hand, provides a more versatile icon set that can be used in various web projects, but lacks the specialized features for Vim users. The choice between the two depends on whether you need icons primarily for Vim or for broader web development purposes.

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

  • Broader application: Designed for use across various platforms and frameworks, not limited to Vim
  • Larger icon set: Offers a more extensive collection of icons, including GitHub-specific symbols
  • Regular updates: Maintained by GitHub, ensuring frequent updates and additions to the icon set

Cons of Octicons

  • Less Vim-specific: Not tailored for Vim integration, requiring additional setup for Vim users
  • Heavier resource: Larger icon set may consume more resources when implemented

Code Comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

Octicons:

<span class="octicon octicon-mark-github"></span>
<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

  • Extensive icon library with over 2,000 icons
  • Widely used and recognized across web development
  • Regular updates and additions to the icon set

Cons of Font-Awesome

  • Not specifically designed for Vim or text editors
  • Larger file size and potential performance impact
  • May require additional setup for use in Vim

Code Comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

Font-Awesome (HTML usage):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-user"></i>

Summary

vim-devicons is specifically designed for Vim and integrates seamlessly with various Vim plugins. It provides file-specific icons and enhances the visual experience within Vim. Font-Awesome, on the other hand, is a more general-purpose icon library primarily used in web development. While Font-Awesome offers a larger selection of icons, it may require additional setup and customization for use in Vim. vim-devicons is more lightweight and tailored for Vim users, making it a better choice for those primarily working within the Vim environment.

25,566

Simply beautiful open-source icons

Pros of Feather

  • Broader application: Feather is a general-purpose icon set, usable in various contexts beyond Vim
  • Simpler design: Icons have a clean, minimalist style that works well across different platforms
  • Customizable: Offers easy customization options for size, color, and stroke width

Cons of Feather

  • Limited scope: Fewer icons specifically tailored for development environments
  • No native Vim integration: Requires additional setup to use within Vim
  • Less granular file type support: May not distinguish between specific programming languages or file types as precisely as vim-devicons

Code Comparison

vim-devicons:

let g:webdevicons_enable = 1
let g:webdevicons_enable_nerdtree = 1
let g:webdevicons_enable_airline_tabline = 1

Feather (using in HTML):

<i data-feather="circle"></i>
<script src="https://unpkg.com/feather-icons"></script>
<script>feather.replace()</script>

While vim-devicons is specifically designed for Vim integration, Feather requires additional setup for use in Vim but offers more flexibility for use in other contexts. vim-devicons provides more extensive support for development-specific icons, while Feather offers a cleaner, more versatile icon set suitable for various applications beyond coding environments.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

VimDevIcons - Add Icons to Your Plugins

version chat on gitter code of conduct prs welcome CI

Supports plugins such as NERDTree, vim-airline, CtrlP, powerline, denite, unite, lightline.vim, vim-startify, vimfiler, vim-buffet and flagship.

vim-devicons overall screenshot

See Screenshots for more.

Features

  • Adds filetype glyphs (icons) to various vim plugins.
  • Customizable and extendable glyphs settings.
  • Supports a wide range of file type extensions.
  • Supports popular full filenames, like .gitignore, node_modules, .vimrc, and many more.
  • Supports byte order marker (BOM).
  • Works with patched fonts, especially Nerd Fonts.

See Detailed Features for more.

See Configuration for a list of configuration and customization options.

Installation

  1. Install a Nerd Font compatible font or patch your own. Then set your terminal font (or guifont if you are using GUI version of Vim).

  2. Install the Vim plugin with your favorite plugin manager, e.g. vim-plug:

    Plug 'ryanoasis/vim-devicons'
    

    Always load the vim-devicons as the very last one.

  3. Configure Vim

    set encoding=UTF-8
    

    No need to set explicitly under Neovim: always uses UTF-8 as the default encoding.

See Installation for detailed setup instructions

Use :help devicons for further configuration.

Developers

See DEVELOPER for how to use the API.

Troubleshooting

See FAQ.

Contributing

Code of Conduct

This project has adopted a Code of Conduct that we expect project participants to adhere to. Check out code of conduct for further details.

Contributing Guide

Read our contributing guide to learn about how to send pull requests, creating issues properly.

Promotion

You can help us by simply giving a star or voting on vim.org. It will ensure continued development going forward.

Acknowledgments

Thanks goes to these people for inspiration and helping with sending PRs.

License

MIT