A beautiful and powerful Django package that seamlessly integrates Remix Icons into your Django projects. π
- π― Model Field: Store Remix Icon identifiers in your Django models
- π¨ Template Tags: Simple and powerful template tags for rendering icons
- π Flexible Styling: Support for size, color, and custom CSS classes
- πͺ Dynamic Icons: Use variables and conditions for dynamic icon selection
- π― Type-Safe: Full Python type hints support
- π Zero Dependencies: Only requires Django
- π Responsive Design: Works seamlessly on desktop and mobile
- π¨ Custom Attributes: Support for data attributes and HTML attributes
pip install django-remix-iconAdd to your INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
# ...
'django_remix_icon',
]from django.db import models
from django_remix_icon.fields import RemixIconField
class Article(models.Model):
title = models.CharField(max_length=200)
icon = RemixIconField()You can use the remix_icon template tag to render icons stored in your model fields. The tag supports various HTML attributes, such as size, color, extra_class, and data_tooltip. Note that underscores in attribute names (e.g., data_tooltip) are automatically converted to hyphens (e.g., data-tooltip) in the rendered HTML.
{% load remix_icon_tags %}
<h1>
{% remix_icon article.icon size="24px" color="#007bff" extra_class="text-blue-500" data_tooltip="Article Icon" %}
{{ article.title }}
</h1>You can also use the remix_icon tag without a model field, directly specifying the icon name. This is useful for static icons in your templates. You can add custom HTML attributes like data_tooltip to enhance the icon's functionality.
{% load remix_icon_tags %}
<nav>
<a href="{% url 'home' %}">
{% remix_icon 'home-line' size="20px" color="#333" extra_class="nav-icon" data_tooltip="Home" %}
Home
</a>
<a href="{% url 'profile' %}">
{% remix_icon 'user-line' size="20px" color="#666" extra_class="nav-icon" data_tooltip="Profile" %}
Profile
</a>
</nav>The color parameter accepts any valid CSS color value:
{% load remix_icon_tags %}
<!-- Using hex colors -->
{% remix_icon 'star-fill' color="#ff0000" %}
<!-- Using named colors -->
{% remix_icon 'heart-fill' color="red" %}
<!-- Using RGB/RGBA -->
{% remix_icon 'check-fill' color="rgb(0, 128, 0)" %}
<!-- Using HSL -->
{% remix_icon 'info-fill' color="hsl(240, 100%, 50%)" %}{% load remix_icon_tags %}
<head>
{% remix_icon_css %}
</head>{% load remix_icon_tags %}
<!-- User status -->
{% if user.is_authenticated %}
{% remix_icon 'user-fill' size="18px" color="#22c55e" %}
{% else %}
{% remix_icon 'user-line' size="18px" color="#94a3b8" %}
{% endif %}
<!-- File type -->
{% if document.file_type == 'pdf' %}
{% remix_icon 'file-pdf-line' size="24px" color="#ef4444" %}
{% elif document.file_type == 'image' %}
{% remix_icon 'image-line' size="24px" color="#3b82f6" %}
{% else %}
{% remix_icon 'file-line' size="24px" color="#6b7280" %}
{% endif %}<nav class="flex space-x-4">
<a href="/" class="flex items-center">
{% remix_icon 'home-line' size="20px" color="#3b82f6" %}
<span class="ml-2">Home</span>
</a>
<a href="/blog" class="flex items-center">
{% remix_icon 'article-line' size="20px" color="#3b82f6" %}
<span class="ml-2">Blog</span>
</a>
</nav><div class="flex items-center">
{% if task.status == 'completed' %}
{% remix_icon 'check-circle-fill' size="20px" color="#22c55e" %}
{% elif task.status == 'in_progress' %}
{% remix_icon 'time-line' size="20px" color="#f59e0b" %}
{% else %}
{% remix_icon 'circle-line' size="20px" color="#94a3b8" %}
{% endif %}
<span class="ml-2">{{ task.name }}</span>
</div>- Python 3.8+
- Django 3.2+
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
- Report bugs or request features via GitHub Issues
- Submit pull requests with tests and documentation
MIT License Β© 2025 Berkay Εen