General icons extension for Phlex. Includes more than 🎨 12,000 icons from:

• Bootstrap Icons (2,000+)
• Flag Icons (250+)
• Heroicons (300+)
• Lucide Icons (1,500+)
• RadixUI Icons (300+)
• Remix Icons (2,800+)
• Tabler Icons (4,800+)

And happy to extend to other icon packs!

If you don't want to add all icon packs to your application, you can add a specific icon pack by using one (or multiple) of the following gems:

• phlex-icons-bootstrap
• phlex-icons-flag
• phlex-icons-hero
• phlex-icons-lucide
• phlex-icons-radix
• phlex-icons-remix
• phlex-icons-tabler

Thanks nejdetkadir for creating Phlex::Heroicons as it was the base for this gem.

Other Phlex icon gems:

• phlex-remixicon
• phlex-lucide

Install the gem and add it to the application's Gemfile by executing:

bundle add phlex-icons

If bundler is not being used to manage dependencies, install the gem by executing:

gem install phlex-icons

The gem provides global configuration options, and per icons pack configuration options.

PhlexIcons.configure do |config|
  config.default_classes = 'size-6'
end

# OR

PhlexIcons.configuration.default_classes = 'size-6'

Nothing to configure for Bootstrap Icons.

PhlexIcons::Flag.configure do |config|
  config.default_variant = :square # or :rectangle
end

# OR

PhlexIcons::Flag.configuration.default_variant = :square # or :rectangle

PhlexIcons::Hero.configure do |config|
  config.default_variant = :solid # or :outline
end

# OR

PhlexIcons::Hero.configuration.default_variant = :solid # or :outline

Nothing to configure for Lucide Icons.

Nothing to configure for RadixUI Icons.

Nothing to configure for Remix Icons.

PhlexIcons::Tabler.configure do |config|
  config.default_variant = :outline # or :filled
end

# OR

PhlexIcons::Tabler.configuration.default_variant = :outline # or :filled

require 'phlex-icons' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
  include PhlexIcons

  def view_template
    div do
      Bootstrap::House(class: 'size-4')
      Flag::Sa(variant: :rectangle, class: 'size-4')
      Hero::Home(variant: :solid, class: 'size-4')
      Lucide::House(class: 'size-4')
      Radix::Home(class: 'size-4')
      Remix::HomeLine(class: 'size-4')
      Tabler::Home(variant: :filled, class: 'size-4')
    end
  end
end

require 'phlex-icons' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
  def view_template
    div do
      render PhlexIcons::Bootstrap::House.new(class: 'size-4')
      render PhlexIcons::Flag::Sa.new(variant: :rectangle, class: 'size-4')
      render PhlexIcons::Hero::Home.new(variant: :solid, class: 'size-4')
      render PhlexIcons::Lucide::House.new(class: 'size-4')
      render PhlexIcons::Radix::Home.new(class: 'size-4')
      render PhlexIcons::Remix::HomeLine.new(class: 'size-4')
      render PhlexIcons::Tabler::Home.new(variant: :filled, class: 'size-4')
    end
  end
end

Let's say you want to use only Heroicons and Flag Icons, you can use the following gems:

• phlex-icons-flag
• phlex-icons-hero

Then, in your application, you can use the icons like this:

require 'phlex-icons-flag' # No need to require the gem if you are using it in a Rails application.
require 'phlex-icons-hero' # No need to require the gem if you are using it in a Rails application.

class PhlexIcons < Phlex::HTML
  include PhlexIcons # If you want to use Phlex::Kit.

  def view_template
    div do
      # With Phlex::Kit.
      Flag::Sa(variant: :rectangle, class: 'size-4')
      Hero::Home(variant: :solid, class: 'size-4')

      # Without Phlex::Kit.
      render PhlexIcons::Flag::Sa.new(variant: :rectangle, class: 'size-4')
      render PhlexIcons::Hero::Home.new(variant: :solid, class: 'size-4')
    end
  end
end

You can extend the gem in your Rails application to add new icons by creating a phlex-icons/custom directory inside views/components directory. Then, you can create a new component for each icon you want to add. For example:

# app/views/components/phlex-icons/custom/icon_class_name.rb

module PhlexIcons
  module Custom
    class IconClassName < PhlexIcons::Base
      def view_template
        # SVG code here.
      end
    end
  end
end

Finally, you will need to create a PhlexIcons::Custom module in phlex-icons/custom.rb file to include your custom icons and make them a Phlex::Kit:

# app/views/components/phlex-icons/custom.rb

module PhlexIcons
  module Custom
    extend Phlex::Kit
  end
end

Now, you can use your custom icons like any other icon pack as described above.

All icon packs provided in this gem are auto-generated by their generator under generators directory. You just need to clone the repo and run the generator for the icon pack you want to update. Also, there is a GitHub Action that will run the generator for all icon packs and update the gem weekly on each Friday.

Each icon pack contains a VERSION constant in its module represents the version of the icon pack used in the gem. So, for example, to get the Bootstrap version used in the gem you can access it by PhlexIcons::Bootstrap::VERSION.

After checking out the repo, open it in VSCode and click Reopen in Container to start a development container. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.

Bug reports and pull requests are welcome on GitHub at https://github.com/AliOsm/phlex-icons. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

The gem is available as open source under the terms of the MIT License.

Everyone interacting in the PhlexIcons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.