Introduction
In today’s digital landscape, having a visually appealing and user-friendly interface is crucial for any business or organization. One way to enhance the user experience is by incorporating high-quality, animated icons into your website or application. The Office Animated Icons Set – WordPress Lottie JSON SVG is a comprehensive pack of 64 animated icons designed specifically for web designers and developers. In this review, I’ll be taking a closer look at the features, compatibility, and overall value of this impressive icon set.
Review
Pros
- Diverse and extensive icon set: The Office Animated Icons Set includes 64 high-quality, animated icons that cover various categories such as tools, environment, equipment, and employee diagrams. This vast array of icons makes it an excellent choice for anyone looking to enhance their website or application with animated icons.
- Customization options: The icons come with After Effects projects for color adjustment, allowing you to customize the colors and stroke width to match your brand’s identity.
- 100% Resizable: The icons are fully resizable, ensuring that they can be used in a variety of applications, from small to large, without compromising on quality.
- Layered design: The icons have a layered design, making it easy to adjust and modify individual elements to suit your needs.
Cons
- Limited compatibility: The icon set is primarily designed for WordPress, with compatibility issues reported with other CMS platforms.
- No tutorials or documentation: The icon set does not come with tutorials or documentation, which can be overwhelming for those new to using Lottie animations.
Conclusion
The Office Animated Icons Set – WordPress Lottie JSON SVG is an impressive collection of animated icons that can elevate the visual appeal of any website or application. While it has some limitations, such as compatibility issues and lack of documentation, the customization options, 100% resizable icons, and layered design make it an excellent value for the price. I would highly recommend this icon set to web designers and developers looking to add a touch of elegance and sophistication to their projects.
Rating: 9/10
Price: $39 (originally $59, saving $20)
Overall, the Office Animated Icons Set is an excellent choice for anyone looking to add a professional and modern touch to their website or application. With its diverse range of icons, customization options, and layered design, this set is sure to impress.
User Reviews
Be the first to review “Office Animated Icons Set – WordPress Lottie JSON SVG”
Introduction
Are you looking for a way to add some visual flair to your WordPress website? Look no further than the Office Animated Icons Set - WordPress Lottie JSON SVG! This powerful plugin allows you to easily add animated icons to your website, using the popular Lottie animation library. In this tutorial, we'll walk you through the step-by-step process of using the Office Animated Icons Set to add animated icons to your WordPress website.
Step 1: Installing the Office Animated Icons Set
To get started, you'll need to install the Office Animated Icons Set plugin on your WordPress website. Here's how:
- Log in to your WordPress dashboard and navigate to the Plugins page.
- Click the "Add New" button at the top of the page.
- Search for "Office Animated Icons Set" in the plugin search bar.
- Click the "Install Now" button to install the plugin.
- Activate the plugin by clicking the "Activate" button.
Step 2: Adding Animated Icons to Your Website
Now that the plugin is installed, it's time to add some animated icons to your website. Here's how:
- Create a new page or post on your website, or edit an existing one.
- Click the "Add Media" button above the content editor.
- Select the "Animated Icons" tab from the media uploader window.
- Browse through the available icons and select the one you want to add.
- Click the "Insert" button to add the icon to your content.
Step 3: Customizing Your Animated Icons
Once you've added an animated icon to your website, you can customize it to fit your needs. Here's how:
- Hover over the animated icon and click the three vertical dots that appear.
- Click the "Edit" button to open the icon editor.
- Use the editor to customize the icon's animation, size, and color.
- Click the "Update" button to save your changes.
Step 4: Using Lottie JSON SVG Files
The Office Animated Icons Set comes with a range of Lottie JSON SVG files that you can use to create custom animations. Here's how to use them:
- Create a new page or post on your website, or edit an existing one.
- Click the "Add Media" button above the content editor.
- Select the "Lottie JSON SVG" tab from the media uploader window.
- Upload your Lottie JSON SVG file to the media library.
- Click the "Insert" button to add the file to your content.
Step 5: Adding Custom CSS
If you want to customize the appearance of your animated icons, you can add custom CSS to your website. Here's how:
- Create a new file in your website's theme directory, named "custom.css".
- Add your custom CSS code to the file.
- Upload the file to your website.
- Use the CSS code to customize the appearance of your animated icons.
Conclusion
That's it! With these steps, you should be able to easily add animated icons to your WordPress website using the Office Animated Icons Set. Remember to customize your icons to fit your brand and style, and don't hesitate to reach out if you have any questions or need further assistance.
Here is an example of how to configure the Office Animated Icons Set - Wordpress Lottie JSON SVG:
Icon Library To use the Office Animated Icons Set, you need to configure the icon library first. You can do this by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_library', 'your_theme_icon_library');
function your_theme_icon_library($icon_library) {
return array(
'library' => 'office',
'version' => '1.0.0',
);
}Icon Sizes You can configure the icon sizes by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_sizes', 'your_theme_icon_sizes');
function your_theme_icon_sizes($icon_sizes) {
return array(
'small' => array(
'width' => 16,
'height' => 16,
),
'medium' => array(
'width' => 24,
'height' => 24,
),
'large' => array(
'width' => 32,
'height' => 32,
),
);
}Icon Animation You can configure the icon animation by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_animation', 'your_theme_icon_animation');
function your_theme_icon_animation($icon_animation) {
return array(
'duration' => 1000,
'iterations' => 1,
);
}Icon Color You can configure the icon color by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_color', 'your_theme_icon_color');
function your_theme_icon_color($icon_color) {
return '#337ab7';
}Icon Background Color You can configure the icon background color by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_background_color', 'your_theme_icon_background_color');
function your_theme_icon_background_color($icon_background_color) {
return '#fff';
}Icon Border Radius You can configure the icon border radius by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_border_radius', 'your_theme_icon_border_radius');
function your_theme_icon_border_radius($icon_border_radius) {
return 4;
}Icon Shadow You can configure the icon shadow by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_shadow', 'your_theme_icon_shadow');
function your_theme_icon_shadow($icon_shadow) {
return array(
'horizontal' => 0,
'vertical' => 2,
'blur' => 4,
'spread' => 0,
'color' => '#333',
);
}Icon Animation Speed You can configure the icon animation speed by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_animation_speed', 'your_theme_icon_animation_speed');
function your_theme_icon_animation_speed($icon_animation_speed) {
return 1.5;
}Icon Animation Direction You can configure the icon animation direction by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_animation_direction', 'your_theme_icon_animation_direction');
function your_theme_icon_animation_direction($icon_animation_direction) {
return 'to-bottom';
}Icon Animation Loop You can configure the icon animation loop by adding the following code to your theme's functions.php file:
add_filter('office_icons_icon_animation_loop', 'your_theme_icon_animation_loop');
function your_theme_icon_animation_loop($icon_animation_loop) {
return true;
}Related Products
$39.00
There are no reviews yet.